vue/js实现点击按钮复制的功能（使用clipboard不再使用过时的execCommand）

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为想要复制的数据

    copy(data) {
      const copydata = data
      const copyInput = document.createElement('input') // 新建一个元素
      copyInput.value = copydata
      document.body.appendChild(copyInput)
      copyInput.select() // 选择对象;
      console.log(copyInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      }) // 用element-ui进行一个提示
      copyInput.remove() // 移除元素
    }

如果是纯js，也是一样的思路，只不过更适合直接获取对应的dom元素

    function copy() {
        var val = document.getElementById('copyContent');
        window.getSelection().selectAllChildren(val);
        document.execCommand("Copy");
        alert("复制成功");
    }
    var clickCopy = document.getElementById("handleCopy");
    clickCopy.onclick = function() {
        copy()
    }

 

其中

execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。处理Html数据时常用(但是这个方法已经过时了)

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