让你更轻松复制到剪切板【clipboard.js】

在做后台管理项目的时候有这么一个需求,在富文本中引入站点管理中的图片，考虑到这样去找到一个图片的地址后插入进来会比较麻烦。于是想到直接在站点管理中展示图片路径，然后把路径复制过来。每次都要手动选择地址并复制过来，能不能更简单点？做一个复制路径的按钮怎么样？

在github搜到这个插件很不错，clipboard.js

使用方法：

1.安装   

npm install clipboard --save
复制代码

2.引入  

import ClipboardJS from 'clipboard'
复制代码

3.将你要触发的元素写上class或者id选择器也行，这里我写了个path

<el-button class="path copyBTN" size="small" :data-clipboard-text="scope.row.path"
           icon="el-icon-document"></el-button>复制代码

4.我用的vue-cli，在created阶段：

created () {
  var clipboard = new ClipboardJS('.path')
  clipboard.on('success', function (e) {
    console.log(e)
  })
  clipboard.on('error', function (e) {
    console.log(e)
  })
}复制代码

完成。这只是其中的一种用法，详细请阅读clipboard.js文档。