讓你更輕鬆複製到剪切板【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文檔。