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('複製失敗，請手動複製')//866109386
      })// 面向1-3年前端人員，幫助突技術瓶頸，提高思惟能力。
    }

以上是筆者本身在實際中遇到的問題及解決辦法並不適用全部，僅供參考，若有不對的地方還請多多之指正，共同窗習進步