vue复制链接功能

最新推荐文章于 2025-03-20 11:17:11 发布

原创最新推荐文章于 2025-03-20 11:17:11 发布 · 651 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

本文介绍了如何在Vue项目中使用Clipboard.js库，实现在el-table中的邀请链接列实现复制功能，包括引入库、模板设置和事件监听。

第一步

npm install clipboard --save

第二步

// 页面中引入
import Clipboard from "clipboard";

第三步

<el-table-column label="邀请链接" align="center">
              <template #default="scope">
                <span :id="'copyBody' + scope.row.id">
                  {{
                    "https://wkzx.wang/invitation/" + scope.row.inviteCode
                  }}</span
                >
                <br />
                <span
                  class="copy_obj"
                  @click="copy"
                  data-clipboard-action="copy"
                  :data-clipboard-target="'#copyBody' + scope.row.id"
                  >复制</span
                >
              </template>
            </el-table-column>

第四步

// 复制
    copy() {
      let clipboard = new Clipboard(".copy_obj");
      clipboard.on("success", (e) => {
        console.log(e);
        clipboard.destroy();
        return this.$message.success("复制成功");
      });
      clipboard.on("error", (e) => {
        console.log(e);
        // 不支持复制
        clipboard.destroy();
        return this.$message.error("该浏览器不支持复制");
      });
    },