前端技术之：如何在Vue中使用clipboard.js复制服务端数据

第一步 创建点击对象页面元素，前端并绑定业务数据。技术<el-buttontype="text"size="mini"class="copy-button" :data-resource-type="scope.data.resource\_type" :data-resource-id="scope.data.resource\_id"> 复制链接</el-button>

第二步 引入clipboard.js。何e中制服

importClipboardJSfromclipboard;

第三步 创建ClipboardJS对象实例。服务器托管使用数据

mounted(){ this.clipboard =newClipboardJS(.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,何e中制服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();}