js实现浏览器中的复制粘贴

开发过程中难免遇到期望点击可以直接复制链接的情况，这里有两种实现方式

第一种：使用原生的js方式进行实现（MDN已废弃且存在兼容性）

使用原生方法实现时主要用到了document.execCommmand方法，该方法允许运行命令来操作可编辑内容区域的元素

语法：

boolean=document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)

返回值：一个Boolean,如果是false则表示操作不被支持或未被启用

参数：

aCommandName
一个DOMString，命令的名称
aShowDefaultUI
一个Boolean,是否展示用户界面，一般为false
aValueArgument
一些命令需要的额外参数，默认为null

常用命令：

copy
拷贝当前选中内容到剪切板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用
cut
剪切当前选中的文字并复制到剪贴板，功能注意事项同上

方法：

copy(value){let outInput=document.createElement("input");outInput.value=value;document.body.appendChild('outInput');outInput.select();//选择对象document.execCommand("copy");//执行copy命令outInput.style.display="none";
}

第二种：使用vue-clipboard2 （clipboard.js）

安装：

nam i vue-clipboard2 -s

项目引入：

//mian.js下引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

使用：

<span>{{text}}</span>
<button v-clipboard:copy='text'v-clipboard:suucess='copySuccess'v-clipboard:error='copyError'></button>methods:{copySuccess(e){},copyError(e){}
}

第三种 navigator Clipboard

Clipboard 接口实现了Clipboard API，如果用户授予了相应的权限，就能提供系统剪贴板的读写访问。在Web应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能

系统剪贴板暴露于全局属性Navigator.clipboard中。
如果用户没有实时使用Permissions API 授予相应权限和‘clipboard-read’ 和 ‘clipboard-write’权限，调用Cliboard对象的方法不会成功

所有剪切板API方法都是异步的；它们返回一个Promise对象，在剪贴板访问完成后被执行。如果剪贴板访问被拒绝，promise也会被拒绝。

方法

read()从剪贴板读取数据，返回一个Promise对象。
readText()从剪贴板中读取文本
write()写入任意数据至操作系统剪贴板
writeText()写入文本到剪贴板

兼容性