第一步 创建点击对象页面元素，并绑定业务数据。

<el-button type="text" size="mini" class="copy-button"  :data-resource-type="scope.data.resource\_type"  :data-resource-id="scope.data.resource\_id">  复制链接</el-button>

第二步 引入clipboard.js。

import ClipboardJS from 'clipboard';

第三步 创建ClipboardJS对象实例。

mounted() {  this.clipboard = new ClipboardJS('.copy-button', {    text: () => this.copyLink  });  ...}

第四步：替换clipboard对象实例的默认的onClick事件。

mounted() {  ...  const that = this;  const oldOnClick = this.clipboard.onClick;  this.clipboard.onClick = function onClick(e) {    const resource\_type = e.delegateTarget.getAttribute('data-resource-type');    const resource\_id = e.delegateTarget.getAttribute('data-resource-id');    console.log('resource\_type, resource\_id is', resource\_type, resource\_id)    that.$axios      .post(APIS.Link, {        type: 'h6\_ugc\_detail',        params: {ugc\_id: resource\_id, ugc\_type: resource\_type},        \_csrf: that.$store.state.csrfToken      })      .then(res => {        that.copyLink = res.data.data.link;        oldOnClick.bind(that.clipboard)(e);      })      .catch(err => {      });  };  ...}

第五步：监听并处理操作成功与失败事件。

mounted() {  ...  this.clipboard.on('success', this.clipOptions.success);  this.clipboard.on('error', this.clipOptions.error);}

其中clipOptions类似如下：

computed: {  clipOptions() {    return {      success: (e) => {        this.$message.success('复制成功');      },      error: () => {        this.$message.error('复制失败');      }    };  },  ...}

第六步：vue生命周期结束时，销毁clipboard对象。

unmounted() {  this.clipboard && this.clipboard.destroy();}