Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能

更新時(shí)間：2018年09月05日 16:52:26 作者：Edwin-du

這篇文章主要介紹了Vue中結(jié)合clipboard實(shí)現(xiàn)復(fù)制功能 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

clipboard.js 是一個(gè)不需要flash，將文本復(fù)制到剪貼板的插件。下面給大家介紹Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能，具體內(nèi)容如下所示：

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

npm install clipboard --save

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

import Clipboard from 'clipboard';

clipboard的實(shí)際使用

不論是單按鈕復(fù)制還是多按鈕復(fù)制，一定要在頁(yè)面加載DOM完成后先New出來(lái)具有復(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)，

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

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

<!--第一種直接綁定在按鈕上-->
 <button class="marleft10 btn" style="float: right;border: none;" :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" style="opacity: 0">
<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)象所以還請(qǐng)各位多多注意-->
  clipboard.on('success', function () {
    Toast('復(fù)制成功')
    _this.destroy() <!--銷(xiāo)毀緩存,然后在重新new這樣不會(huì)出現(xiàn)點(diǎn)擊復(fù)制上出現(xiàn)之前復(fù)制的內(nèi)容的情況-->
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('復(fù)制失敗，請(qǐng)手動(dòng)復(fù)制')
   })
  }

總結(jié)

以上所述是小編給大家介紹的Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法
這篇文章主要給大家介紹了關(guān)于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁(yè)面不刷新的解決方法,vue比較常見(jiàn)的坑就是數(shù)據(jù)(后臺(tái)返回)更新了,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
詳解vue中移動(dòng)端自適應(yīng)方案
這篇文章主要介紹了vue移動(dòng)端自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue3項(xiàng)目中引入html頁(yè)面的方法舉例
這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中引入html頁(yè)面的相關(guān)資料,Vue3是一個(gè)JavaScript框架,通常我們使用它來(lái)構(gòu)建單頁(yè)應(yīng)用程序(SPA),如果你想在HTML頁(yè)面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下
2023-09-09
vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容，希望對(duì)你有所幫助
2021-10-10
vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能
這篇文章主要介紹了vue 實(shí)現(xiàn)剪裁圖片并上傳服務(wù)器功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-03-03
vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象
這篇文章主要介紹了vue如何通過(guò)props方式在子組件中獲取相應(yīng)的對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue過(guò)濾器filter的使用方法詳解
這篇文章主要給大家介紹了關(guān)于vue過(guò)濾器filter的使用方法,Vue.js的過(guò)濾器(Filter)是一種可重用的功能,用于對(duì)文本進(jìn)行格式化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)
這篇文章主要介紹了vue如何使用js對(duì)圖片進(jìn)行點(diǎn)擊標(biāo)注圓點(diǎn)并記錄它的坐標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue頁(yè)面批量引入組件的操作代碼
這篇文章主要介紹了vue頁(yè)面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12