前端技术之：如何在Vue中使用clipboard.js复制服务端数据
发布时间：2025-11-05 03:59:38 来源：云智核 作者：IT科技
第一步 创建点击对象页面元素，前端并绑定业务数据。技术<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中制服
第三步 创建ClipboardJS对象实例。b2b信息网使用数据
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对象。IT技术网使用数据
前端unmounted(){this.clipboard &&this.clipboard.destroy();}亿华云服务器租用IT技术网香港云服务器源码库源码下载IT资讯网企商汇益华科技亿华灵动益强资讯优选益华科技亿华互联极客编程汇智坊益强科技全栈开发益华IT技术论坛益强IT技术网亿华智慧云益强编程堂益华科技创站工坊科技前瞻多维IT资讯云智核益强前沿资讯IT资讯网思维库亿华云计算益强智囊团益强智未来技术快报运维纵横益强数据堂亿华云编程之道益强科技码上建站益强编程舍
- Copyright © 2025 Powered by 前端技术之：如何在Vue中使用clipboard.js复制服务端数据,云智核 滇ICP备2023006006号-28sitemap