一键复制效果实现

在开发过程中，我们常常需要实现一键复制链接。具体的两种实现方式如下：

1.原生开发

if (evt.target.className == 'copy-url') {
                var Url2 = evt.target.getAttribute('data-index'); //获取需要复制的内容
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                alert('复制成功');
            }

2.vue+element开发

安装插件：

npm install clipboard --save

使用插件：

// 复制链接函数
    copyUrl() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功"); //这里你如果引入了elementui的提示就可以用，没有就注释即可
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        console.log("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },