Vue中使用clipboard實(shí)現(xiàn)復(fù)制功能
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出來具有復(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() <!--銷毀緩存,然后在重新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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動(dòng)態(tài)參數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
學(xué)過?vue2?的寶子們應(yīng)該都清楚，計(jì)算屬性這個(gè)東西在項(xiàng)目開發(fā)過程中使用的還是比較頻繁的，使用頻率相對(duì)來說比較高。本文就來為大家介紹一下Vue3中計(jì)算屬性的用法，需要的可以參考一下2022-07-07
監(jiān)聽屬性可以針對(duì)某個(gè)屬性進(jìn)行監(jiān)聽,當(dāng)監(jiān)聽的屬性的值發(fā)生了變化,則會(huì)執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐
這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
v-if根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏操作DOM元素，這篇文章主要介紹了vue中的v-if基本使用,需要的朋友可以參考下2022-12-12
vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
手把手帶你封裝一個(gè)vue component第三方庫(kù)
這篇文章主要介紹了手把手帶你封裝一個(gè)vue component第三方庫(kù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02