Navigator.clipboard

剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard ，该属性返回一个可以读写剪切板内容的 Clipboard 对象。 在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。

Clipboard 相比以前更加简洁，采用promise实现

navigator.clipboard.writeText(value);  // value就是复制的内容，其后也可以追加.then()

navigator.clipboard.readText().then(  
clipText => document.querySelector(".cliptext").innerText = clipText
); // 如果剪切板为空，则clipText也会为空。

详细文档链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/clipboard

如果使用vue-element-admin，则可以使用他已经封装了的方法。可以看另一篇随笔（ vue-element-admin 的复制方法 ）

需要注意的是可能有错误：TypeError: navigator.clipboard is undefined

这个问题由于新版浏览器的安全策略，clipboard只有在安全域名下才可以访问，http域名下会显示undefined，但使用https开头的域名，或localhost，就可以访问navigator.clipboard。

这种情况可以考虑使用document.execCommand。

————————————以下为过时内容——————————————————————

大致思路就是先选中此元素，然后用document中的execCommand()命令中的copy来完成复制

对于vue来说，我们一般更容易直接获取到这个数据，所以先根据数据创建添加一个新的dom元素，再选中复制，函数最后删除这个dom元素

以下是一个copy函数，参数data为想要复制的数据

 1     copy(data) {
 2       const copydata = data
 3       const copyInput = document.createElement('input') // 新建一个元素
 4       copyInput.value = copydata
 5       document.body.appendChild(copyInput)
 6       copyInput.select() // 选择对象;
 7       console.log(copyInput.value)
 8       document.execCommand('Copy') // 执行浏览器复制命令
 9       this.$message({
10         message: '复制成功',
11         type: 'success'
12       }) // 用element-ui进行一个提示
13       copyInput.remove() // 移除元素
如果是纯js，也是一样的思路，只不过更适合直接获取对应的dom元素
 1     function copy() {
 2         var val = document.getElementById('copyContent');
 3         window.getSelection().selectAllChildren(val);
 4         document.execCommand("Copy");
 5         alert("复制成功");
 7     var clickCopy = document.getElementById("handleCopy");
 8     clickCopy.onclick = function() {
 9         copy()
execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。处理Html数据时常用(但是这个方法已经过时了)
详细文档链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand