前端技术之：如何在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();}