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

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

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

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

语法：

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

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

参数：

aCommandName 一个DOMString，命令的名称aShowDefaultUI 一个Boolean,是否展示用户界面，一般为falseaValueArgument 一些命令需要的额外参数，默认为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()写入文本到剪贴板

兼容性