需求設定

1. 點選某個按鈕，將設定的目標內容(例如下載連結地址)複製到剪下板，可以在電腦上任何地方貼上
2. 不使用任何框架和使用Flash，以最小的程式碼實現該功能，並能相容所有主流瀏覽器

外掛選擇

• clipboard.js:

*  `NPM方式`：`npm install clipboard --save`
*  `直接引入`：下載原始碼以後將相關`JS`放在目錄下，之後引入：`<script src="xxx/clipboard.min.js"></script>`

3. 使用方式(官方文件例子)：

*  `HTML`(`target`包括但不限於`input`)
```
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    點選複製
</button>
```
 *** 
*  `JS`
```
var clipboard = new ClipboardJS('.btn');
//成功回撥
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);  
    e.clearSelection();
});
//失敗回撥
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
```
 

更多使用方式和功能請參考官方文件，這裡只舉例一個實用且常用的功能！

相容性：

正文開始了！！！，在Vue中咋用？

1. Vue專案所使用的相關外掛(這僅是本人使用到clipboard.js那個專案用到的，不全是必須的)：vue-router、vue-cli、es6-promise、axios、scss、element-ui、clipboard。

2. 使用clipboard步驟介紹開始：

*  安裝：`npm install clipboard --save`
*  引入(`main.js`)：
```
import clipboard from 'clipboard';
//註冊到vue原型上
Vue.prototype.clipboard = clipboard;
```
***
*  **template**：
```
<input type="text" id="success_form_input" readonly="readonly" v-model="link"/>
/*button上的這個ref需要命名一個，名字自己取，下面會講解為什麼*/
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#success_form_input" @click="copyLink">複製</button>
```
***
*  **Events**:
```
data() {
    return {
        copyBtn: null //儲存初始化複製按鈕事件
    }
},
mounted() {
    /*這裡使用了剛開始註冊到vue原型上的clipboard(使用註冊到vue原型的外掛的方法就是：this + 註冊時命名名字)
    *這裡需要用到剛才給button命名的ref的名字，因為這是vue提供的獲取DOM的方法，雖然可以通過引入jQuery來獲取，但是不推薦這樣做，具體原因可以看官方文件和網上論壇搜尋
    *這裡是在掛載到DOM節點時將button按鈕傳入clipboard並存儲起來，具體原因下面會有詳述
    */
    this.copyBtn = new this.clipboard(this.$refs.copy);
},
methods: {
    copyLink() {
    /*這是點選按鈕觸發的點選事件，關於clipboard的使用就不再贅述了，上面介紹時已經講述過，並且使用方法在官方文件上有*/
        let _this = this;
        let clipboard = _this.copyBtn;
        clipboard.on('success', function() {
            _this.$message({ /*這是使用了element-UI的資訊彈框*/
                message: '複製成功！',
                type: 'success'
            });
        });
        clipboard.on('error', function() {
            _this.$message({
                message: '複製失敗，請手動選擇複製！',
                type: 'error'
            });
        });
    }
}
```
 

3. 對Events的寫法解惑及使用clipboard過程中的注意事項：

• 為什麼要在mounted週期中把按鈕先儲存起來？

  • 答：經過親自測試，若在點選事件中再初始話，即把mounted中的內容放到copyLink函式中，那麼第一次點選會無效，第二次及以後便能生效，這樣肯定是不符合要求的，因此我想了這麼一個辦法來解決這麼一個問題，當然不單單不是mounted週期，放在created和beforeMounted週期應該也是行的，雖然沒有親自測試，但是因為這兩個週期已經能獲取DOM了，應該是可以的。

• 使用過程中的注意事項

  • 使用NPM安裝完成之後記得在main.js中引入並註冊到Vue原型上，名字可以自己取。
  • 使用時通過this + 原型上命名名字來呼叫clipboard。
  • 按鈕通過ref的命名來取，就是this.$refs.xxx,不推薦使用jQuery來獲取DOM。
  • 關於clipboard複製按鈕的要求請遵從官方文件要求，例如加上data-clipboard-action和data-clipboard-target等。

使用過程中若有任何疑問，歡迎留言詢問！^__ 不足之處，歡迎各位批評指正！