vue 复制文本链接功能

项目中的场景效果：

1、

点击为每条广告生成的短链接，即复制到粘贴板成功

2、

实现步骤：

1. 安装vue插件

执行该命令：

npm install clipboard --save

 我装的是2.0.4版本

2. 然后页面中引入：

3. 给复制按钮添加一个class：后面调用的时候会用到

4. method中的方法详解：

      //复制链接
      copyUrl(row){
        let self = this;
        var contentId = row.id;
        //咨讯链接
        //线上环境 http://byl.zhengquan51.com/api/h5/content/queryById?contentId=5
        //测试环境
        var url = "http://192.168.1.61:8082/api/h5/content/queryById?contentId=" + contentId;
        var clipboard = new Clipboard('.tag-read', {
          text: function() {
            return url;
          }
        });

        clipboard.on('success', e => {
          self.$message({
            message: '复制链接成功!',
            type: 'success'
          });
          //tips(this, '复制链接成功!', 'success');
          clipboard.destroy()   // 释放内存
        })
        clipboard.on('error', e => {
          // 不支持复制
          self.$message({
            message: '该浏览器不支持链接复制!',
            type: 'warning'
          });
          //tips(this, '该浏览器不支持链接复制!', 'warning');
          clipboard.destroy()    // 释放内存
        })
      },

最后测试效果，目标链接即已复制到粘贴板！