Vue 中复制插件 clipboard.js

github: https://github.com/zenorocha/clipboard.js

utils.js

export const copy = className => {
    const clipboard = new Clipboard(className);
    clipboard.on('success', () => {
        Message({
            message: '复制成功',
            type: 'success',
        });
        clipboard.destroy(); // 释放内存
    });
    clipboard.on('error', () => {
        Message({
            message: '该浏览器不支持自动复制',
            type: 'warning',
        });
        clipboard.destroy(); // 释放内存
    });
};

<el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :indent="5"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      @current-change="currentChange"
    >
      <div
        slot-scope="{ node, data }"
        :class="{
          'department-tree-node': true,
          'department-tree-select': selectId === data.id,
        }"
      >
        <textTooltip
          :content="node.label"
          type="text"
          class="department-tree-node__label"
          class-name="department-tree-node__label__box"
        />
        <div class="department-tree-node__btn">
          <el-button
            v-if="node.level < 2 && hasPermissions('pro_org_add')"
            type="text"
            size="mini"
            icon="el-icon-plus"
            @click.stop="append(node, data)"
          >
          </el-button>
          <el-button
            v-if="hasPermissions('pro_org_edit')"
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click.stop="edit(node, data)"
          >
          </el-button>
          <el-button
            v-if="node.level !== 1"
            type="text"
            size="mini"
            icon="el-icon-link"
            @click.stop="link(data)"
          ></el-button>
          <el-button
            v-if="node.level !== 1 && hasPermissions('pro_org_del')"
            type="text"
            size="mini"
            icon="el-icon-close"
            @click.stop="remove(data)"
          >
          </el-button>
        </div>
      </div>
    </el-tree>


<span ref="copyValue" class="copyValue" :data-clipboard-text="clipboardText" @click="copy('.copyValue')"></span>

link(data) {
      console.log(lStorage.get('tenantid'));
      this.clipboardText = `${window.location.protocol}//${window.location.host}/scd-footprint-enterprise/register?id=${
        data.id
      }&tenantId=${lStorage.get('tenantId')}`;
      this.$confirm('是否生成邀请企业注册链接?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$refs.copyValue.click();
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          });
        });
    },