一键复制效果实现

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

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

使用插件：

import Clipboard from "clipboard";

<el-table-column
        label="视频链接"
        align="center"
        prop="share_url"
        :resizable="false"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">点击复制</div>
            <span
              style="display:block;cursor:pointer;100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
              class="tag-read"
              :data-clipboard-text="scope.row.share_url"
              @click="copyUrl"
              >{{ scope.row.share_url }}</span
            >
          </el-tooltip>
        </template>
      </el-table-column>

// 复制链接函数
    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();
      });
    },