Vue中配合clipboard.js實現點擊按鈕複製內容到剪切板

需求設定

1. 點擊某個按鈕，將設置的目標內容(例以下載連接地址)複製到剪切板，能夠在電腦上任何地方粘貼
2. 不使用任何框架和使用Flash，以最小的代碼實現該功能，並能兼容全部主流瀏覽器

---

插件選擇

• clipboard.js:

1. 官網連接地址：clipboard.js

2. 引入方式：

   • 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等。

---

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