vue 复制文本

一个常用的库就是 clipboard.js,它可以帮助您实现跨浏览器的复制到剪贴板功能

首先,安装 clipboard.js:

cnpm install clipboard

创建一个 Vue 组件并使用 clipboard.js:

<template><div><input v-model="textToCopy" type="text" /><button @click="copyText">Copy</button></div>
</template>
<script setup>
import Clipboard from 'clipboard';
import { ref } from 'vue';const textToCopy = ref('');const copyText = () => {const clipboard = new Clipboard('.copy-button', {text: () => textToCopy.value});clipboard.on('success', (e) => {console.log('Text copied:', e.text);clipboard.destroy(); // 清理 clipboard 实例});clipboard.on('error', (e) => {console.error('Copy failed:', e.action);clipboard.destroy();});clipboard.onClick(event); // 触发点击事件
};
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/49695.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack 从入门到放弃!

webpack webpack于2012年3月10号诞生&#xff0c;作者是Tobias(德国)。参考GWT(Google Web Toolkit)的code splitting功能在webpack中进行实现。然后在2014年Instagram团队分享性能优化时&#xff0c;提出使用webpack的code splitting特性从而大火。 现在webpack的出现模糊了任…

快速提高写作生产力——使用PicGo+Github搭建免费图床,并结合Typora

文章目录 简述PicGo下载PicGo获取Token配置PicGo结合Typora总结 简述PicGo PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具 PicGo 本体支持如下图床&#xff1a; 七牛图床 v1.0腾讯云 COS v4\v5 版本 v1.1 & v1.5.0又拍云 v1.2.0GitHub v1.5.0SM.MS V2 v2.3.0-b…

drools8尝试(加单元测试)

drools8的maven模板项目里没有单元测试, 相比而言drools7有个非常好的test senorios 那就自己弄一个 文件是.http后缀的,写了个简单的例子如下 //测试交通违章 POST http://localhost:8080/Traffic Violation accept: application/json Content-Type: application/json{&q…

LeetCode两数之和

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…

前端面试:【Redux】状态管理的精髓

嘿&#xff0c;亲爱的Redux探险家&#xff01;在前端开发的旅程中&#xff0c;有一个强大的状态管理工具&#xff0c;那就是Redux。Redux是一个状态容器&#xff0c;它以一种可预测的方式管理应用的状态&#xff0c;通过Store、Action、Reducer、中间件和异步处理等核心概念&am…

C++系列-类对象作为类成员

类对象作为类成员 类中的成员可以是另一个类的对象。该成员成为对象成员当其它类的对现作为本类的成员&#xff0c;先构造其它类对象&#xff0c;再构造本身。当其它类的对现作为本类的成员&#xff0c;先析构自身&#xff0c;再析构其它类对象。 code:#include<iostream&g…

玩转单元测试之cppmockfree

引言 前文我们已经讲解了gmock的基本语法,但是gmock只能mock虚函数,如果要mock非虚成员函数、静态成员函数、全局函数、重载函数、模板函数以及其他依赖库的函数时,gmock就很难实现。而cppmockfree可以支持这些函数的mock。 快速入门 1. mock样例 1.1 全局函数 // gloa…

代码pytorch-adda-master跑通记录

前言 最近在学习迁移学习&#xff0c;ADDA算法&#xff0c;由于嫌自己写麻烦&#xff0c;准备先跑通别人的代码。 代码名称&#xff1a;pytorch-adda-master 博客&#xff1a;https://www.cnblogs.com/BlairGrowing/p/17020378.html github地址&#xff1a;https://github.com…

数据备份(手动备份与自动备份)

目录 1. 手动备份 1.使用Windows ServerBackup管理控制台手动备份 2.使用命令行工具手动备份 2. 自动备份 3 备份设置 1.普通备份性能 2.快速备份性能 3.自定义 1. 手动备份 案例9.1某公司有一台WindowsServer2016文件服务器&#xff0c;公司的很多重要文件都保存在新加卷…

恢复NuGet包_解决:System.BadImageFormatException:无法加载文件或程序集

C#工程 主要是开发了一个 web api接口&#xff0c;这个工程源码去年还可以的&#xff0c;今年换了一个电脑打开工程就报错。 错误提示如下&#xff1a; 在 Microsoft.CodeAnalysis.CSharp.CommandLine.Program.Main(String[] args) Test1 System.BadImageFormatEx…

一、数据库基础

数据库 一、数据库基础 1、一些概念 数据库&#xff1a;数据库&#xff08;DataBase &#xff0c;简称DB&#xff09;&#xff0c;就是信息的集合。数据库是由数据库管理系统管理的数据的集合&#xff1b;数据库管理系统&#xff1a;简称DBMS 。是一种操纵和管理数据库的大型…

android核绑定cpuset配置与检测进程所在核cpuset方法

一、开机阶段 开机有如下阶段。抛开开机动画需要的audio、surfaceflinger等进程&#xff0c;大部分android程序是在/data分区加载完整以后开始加载。所以cpuset的配置可以在 post-fs-data之后。注意&#xff0c;init.rc的不同阶段脚本都可能覆盖前面配置的cpuset。配置好检查与…

【附安装包】Tecplot 360 EX2022安装教程

软件下载 软件&#xff1a;Tecplot 360版本&#xff1a;2022语言&#xff1a;英文大小&#xff1a;388.97M安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.5GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接&#xff1a;https://pan.baid…

Ctfshow web入门 命令执行RCE篇 web29-web77 与 web118-web124 详细题解 全

Ctfshow 命令执行 web29 pregmatch是正则匹配函数&#xff0c;匹配是否包含flag&#xff0c;if(!preg_match("/flag/i", $c))&#xff0c;/i忽略大小写 可以利用system来间接执行系统命令 flag采用f*绕过&#xff0c;或者mv fl?g.php 1.txt修改文件名&#xff0c…

DDD 架构分层,MQ消息要放到那一层处理?

作者&#xff1a;小傅哥 博客&#xff1a;https://bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 本文的宗旨在于通过简单干净实践的方式教会读者&#xff0c;使用 Docker 配置 RocketMQ 并在基于 DDD 分层结构的 SpringBoot 工…

多个微信号怎么快速发圈、自动加好友、自动回复?

一键助你快速发圈、批量自动加好友、自动回复&#xff0c;好用哭了&#xff01; 微信管理系统是一个聚合管理多个微信账号的利器&#xff0c;让你的微信管理变得简单高效。不管你是电商、微商&#xff0c;还是拥有多个微信号的用户&#xff0c;这一款微信管理软件都可以满足你的…

【数据结构】 LinkedList的模拟实现与使用

文章目录 &#x1f340;什么是LinkedList&#x1f334;LinkedList的模拟实现&#x1f6a9;创建双链表&#x1f6a9;头插法&#x1f6a9;尾插法&#x1f6a9;任意位置插入&#x1f6a9;查找关键字&#x1f6a9;链表长度&#x1f6a9;打印链表&#x1f6a9;删除第一次出现关键字为…

javaScript:带你深入了解基本数据类型和引用类型

目录 一.前言 二.Ecmascript 规定的变量有两种 补充 1.基本数据类型&#xff08;重点掌握&#xff09; 基本数据类型的特点 2.引用数据类型 &#xff08;重点掌握&#xff09; 引用数据类型的特点 三.什么是栈&#xff1f;堆&#xff1f; 下面代码帮助了解 解释 官…

spring boot分装通用的查询+分页接口

背景 在用spring bootmybatis plus实现增删改查的时候&#xff0c;总是免不了各种模糊查询和分页的查询。每个数据表设计一个模糊分页&#xff0c;这样代码就造成了冗余&#xff0c;且对自身的技能提升没有帮助。那么有没有办法实现一个通用的增删改查的方法呢&#xff1f;今天…

爬虫工具的选择与使用:阐述Python爬虫优劣势

作为专业爬虫ip方案解决服务商&#xff0c;我们每天都面对着大量的数据采集任务需求。在众多的爬虫工具中&#xff0c;Python爬虫凭借其灵活性和功能强大而备受青睐。本文将为大家分享Python爬虫在市场上的优势与劣势&#xff0c;帮助你在爬虫业务中脱颖而出。 一、优势篇 灵活…