一键复制效果实现

Posted 2021-09-30 Aperio

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开发

<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;width: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