Vue中結合clipboard實現復制功能

首先現在Vue中引入clipboard

npm install clipboard --save

在需要使用的組件中import 引入clipboard

import Clipboard from 'clipboard';

clipboard的實際使用

不論是單按鈕復制還是多按鈕復制，一定要在頁面加載DOM完成后先New出來具有復制功能的按鈕，如果在函數內再New那么可能會出現點擊復制按鈕兩次，才復制成功的現象，如下：

 mounted() {
    var copybtn = document.getElementsByClassName('btn')
    this.clipboard = new Clipboard(copybtn);
    }
<!--並不一定非要在mounted中也可以在其他周期內，
    只要頁面已經加載完DOM即可，如果是動態生成可以使用nextTick中New。-->

綁定復制內容的方式有以下幾種：

<!--第一種直接綁定在按鈕上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
        @click="copy()">復制
        </button>
<!--第二種單個復制按鈕動態獲取需要復制的內容-->
<input type="text" v-model="copyContent"  id="copy_text" style="opacity: 0">
<button ref="copy"  data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">復制</button>
<!--第三種可以在New Clipboard時設定要復制的內容-->
new Clipboard('copyBtn',function(){
    return <!--要復制的內容-->
})

copy(){
    let _this = this
    <!--如果在內部new會出現點擊兩次在復制成功的現象所以還請各位多多注意-->
    clipboard.on('success', function () {
        Toast('復制成功')
        _this.destroy() <!--銷毀緩存,然后在重新new這樣不會出現點擊復制上出現之前復制的內容的情況-->
        _this.clipboard = new Clipboard(copyBtn);
    })
    clipboard.on('error', function () {
        Toast('復制失敗，請手動復制')
      })
    }

以上是筆者自己在實際中遇到的問題及解決辦法並不適用所有，僅供參考，如有不對的地方還請多多之指正，共同學習進步