Vue中結合clipboard實現複製功能

wait.發表於2018-10-29
Vue

首先現在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年前端人員，幫助突技術瓶頸，提升思維能力。
    }
複製程式碼

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

相關文章