第一步 创建点击对象页面元素，并绑定业务数据。
<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: 'h5_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(); }
