vue 复制,vue粘贴事件
最近在项目中遇到了点击按钮复制链接的功能，所以本文主要介绍vue的粘贴复制功能的实现过程。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
介绍1。项目需求图的展示：1。安装第三方插件的方法(不推荐)2。浏览器中的Document.execCommand()复制方法(不推荐)3 .Clipboard.writeText方法(强烈推荐)摘要
引言
如果在项目中实现粘贴复制功能，目前市面上有三种方法，各有优缺点。可以根据自己项目的实际情况来选择。本节将详细介绍这三种方法，并推荐第三种方法。
1. 项目需求图展示：
1. 安装第三方插件方法（不推荐）
该方法具有良好的兼容性。如果项目只使用一次，不建议使用。
安装插件
npm安装剪贴板-保存
引入插件
从“剪贴板”导入剪贴板；
项目中使用
模板
span class=copy @click=onCopy
i class=iconfont iconcopy/i
单击“复制”span/span。
/span
/模板
脚本
方法：{
onCopy(){
let clipboard=new Clipboard(。复制’)
clipboard.on(success ，e={
Console.log(“复制成功”)
//释放内存
clipboard.destroy()
})
clipboard.on(error ，e={
//不支持复制。
Console.log(“此浏览器不支持自动复制”)
//释放内存
clipboard.destroy()
})
}
}
/脚本
2. 浏览器自带Document.execCommand()复制方法（不推荐）
虽然这种方法不需要安装插件，但官网声明如下：
项目中使用
脚本
方法：{
onCopy(){
//创建一个输入框
const input=document . createelement(“input”)
//将指定的DOM节点添加到正文的末尾
document.body.appendChild(输入)
//将输入框的值设置为活动地址
input.setAttribute(value ，e)
//选择文本字段中的内容
input.select()
//复制是指将当前选中的内容复制到剪贴板上。
//document.execCommand()方法处理可编辑内容区域的元素。
//返回值为布尔值，如果为false，则表示不支持或未启用该操作。
if(document . exec command( copy ){
document.execCommand(copy )
}
//删除此节点
document.body.removeChild(输入)
}
/脚本
3. Clipboard.writeText方法（强烈推荐）
说明
Clipboard接口的writeText()方法可以将特定的字符串写入操作系统的剪贴板。将返回一个承诺，一旦剪贴板的内容被更新，该承诺将被解析。如果调用方没有权限写入剪贴板，它将拒绝写入剪贴板(reject)。
项目中使用
onCopy() {
navigator . clipboard . write text(this . detail data . client secret)。然后(()={
这个。$message.success(复制成功)
})
}
总结
这篇关于vue的粘贴复制功能的文章到此为止。更多关于vue的粘贴复制功能，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。