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('複製失敗，請手動複製')
      })
    }

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