怎么在Vue中使用clipboard實(shí)現(xiàn)一個(gè)復(fù)制功能

怎么在Vue中使用clipboard實(shí)現(xiàn)一個(gè)復(fù)制功能？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

首先現(xiàn)在Vue中引入clipboard

npm install clipboard --save

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

import Clipboard from 'clipboard';

clipboard的實(shí)際使用

不論是單按鈕復(fù)制還是多按鈕復(fù)制，一定要在頁面加載DOM完成后先New出來具有復(fù)制功能的按鈕，如果在函數(shù)內(nèi)再New那么可能會(huì)出現(xiàn)點(diǎn)擊復(fù)制按鈕兩次，才復(fù)制成功的現(xiàn)象，如下：

mounted() {
  var copybtn = document.getElementsByClassName('btn')
  this.clipboard = new Clipboard(copybtn);
  }
<!--并不一定非要在mounted中也可以在其他周期內(nèi)，

    只要頁面已經(jīng)加載完DOM即可，如果是動(dòng)態(tài)生成可以使用nextTick中New。-->

綁定復(fù)制內(nèi)容的方式有以下幾種：

<!--第一種直接綁定在按鈕上-->
 <button class="marleft10 btn"  :data-clipboard-text="2"
    @click="copy()">復(fù)制
    </button>
<!--第二種單個(gè)復(fù)制按鈕動(dòng)態(tài)獲取需要復(fù)制的內(nèi)容-->
<input type="text" v-model="copyContent" id="copy_text" >
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">復(fù)制</button>
<!--第三種可以在New Clipboard時(shí)設(shè)定要復(fù)制的內(nèi)容-->
new Clipboard('copyBtn',function(){
  return <!--要復(fù)制的內(nèi)容-->
})
copy(){
  let _this = this
  <!--如果在內(nèi)部new會(huì)出現(xiàn)點(diǎn)擊兩次在復(fù)制成功的現(xiàn)象所以還請各位多多注意-->
  clipboard.on('success', function () {
    Toast('復(fù)制成功')
    _this.destroy() <!--銷毀緩存,然后在重新new這樣不會(huì)出現(xiàn)點(diǎn)擊復(fù)制上出現(xiàn)之前復(fù)制的內(nèi)容的情況-->
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('復(fù)制失敗，請手動(dòng)復(fù)制')
   })
  }

關(guān)于怎么在Vue中使用clipboard實(shí)現(xiàn)一個(gè)復(fù)制功能問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。