vue复制链接功能

第一步

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("该浏览器不支持复制");
      });
    },