【Vue】使用clipboard实现复制文本到剪贴板

需求如下：假设有这样的列表，我们希望能够点击复制通知链接按钮，将表格中通知链接列的内容复制到剪贴板，毕竟通知链接的内容比较多，能够复制的话，该列就可以不用展示出来。

1、安装clipboard

npm install clipboard --save

查看是否安装成功，以及查看安装的版本，可以通过查看package.json文件

2、在页面的script标签中进行引入即可使用

3、表格部分代码

4、copy( )方法代码

// 操作：复制通知链接
    copy(index) {
        var Url = this.versions[index].notifyUrl;
        var clipboard = new Clipboard('.tag-read', {
            text: function() {
                return Url;
            }
        });
        clipboard.on('success', e => {
          tips(this, '复制成功!', 'success');
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          tips(this, '该浏览器不支持自动复制!', 'warning');
          // 释放内存
          clipboard.destroy()
        })
      }

5、效果如下：

    打开浏览器，即可复制网址