1.安装插件

  1. cnpm install clipboard --save

2.所需页面中引入插件

  1. import Clipboard from \'clipboard\';

3.按钮

  1. <div class="copy flexCenter" @click="copyUrl" :data-clipboard-text="url"><img src="../../assets/image/icon_link.png" style="margin-right: 10px;"/>复制本文链接</div>

4.data中定义url，并在created中赋值

 

 

4.methods

  1. methods:{
  2. //  复制本文链接
  3.         copyUrl(){
  4.           let _this = this;
  5.           let clipboard = new Clipboard(".copy"); // 这里括号里填写上面点击事件绑定的class名
  6.           clipboard.on("success", e => {
  7.             // console.log(\'aaaaa\',e.text)
  8.             _this.$message.success("复制成功")
  9.             // 释放内存
  10.             clipboard.destroy();
  11.           });
  12.           clipboard.on("error", e => {
  13.             // 不支持复制，提示根据自己项目实际使用的UI来写
  14.             _this.$message.error("该浏览器不支持自动复制")
  15.             // 释放内存
  16.             clipboard.destroy();
  17.           });
  19.         }
  21. }

 

版权声明：本文为duanzhenzhen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/duanzhenzhen/p/13921178.html