Vue中使用clipboard實現(xiàn)復制功能
更新時間：2018年09月05日 16:52:26 作者：Edwin-du
這篇文章主要介紹了Vue中結合clipboard實現(xiàn)復制功能 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
clipboard.js 是一個不需要flash，將文本復制到剪貼板的插件。下面給大家介紹Vue中使用clipboard實現(xiàn)復制功能，具體內容如下所示：
首先現(xiàn)在Vue中引入clipboard
npm install clipboard --save
在需要使用的組件中import 引入clipboard
import Clipboard from 'clipboard';
clipboard的實際使用
不論是單按鈕復制還是多按鈕復制，一定要在頁面加載DOM完成后先New出來具有復制功能的按鈕，如果在函數(shù)內再New那么可能會出現(xiàn)點擊復制按鈕兩次，才復制成功的現(xiàn)象，如下：
mounted() {
var copybtn = document.getElementsByClassName('btn')
this.clipboard = new Clipboard(copybtn);
}
<!--并不一定非要在mounted中也可以在其他周期內，
只要頁面已經(jīng)加載完DOM即可，如果是動態(tài)生成可以使用nextTick中New。-->
綁定復制內容的方式有以下幾種：
<!--第一種直接綁定在按鈕上-->
<button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
@click="copy()">復制
</button>
<!--第二種單個復制按鈕動態(tà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">復制</button>
<!--第三種可以在New Clipboard時設定要復制的內容-->
new Clipboard('copyBtn',function(){
return <!--要復制的內容-->
})
copy(){
let _this = this
<!--如果在內部new會出現(xiàn)點擊兩次在復制成功的現(xiàn)象所以還請各位多多注意-->
clipboard.on('success', function () {
Toast('復制成功')
_this.destroy() <!--銷毀緩存,然后在重新new這樣不會出現(xiàn)點擊復制上出現(xiàn)之前復制的內容的情況-->
_this.clipboard = new Clipboard(copyBtn);
})
clipboard.on('error', function () {
Toast('復制失敗，請手動復制')
})
}
總結
以上所述是小編給大家介紹的Vue中使用clipboard實現(xiàn)復制功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法
這篇文章主要給大家介紹了關于vue改變數(shù)據(jù)后數(shù)據(jù)變化頁面不刷新的解決方法,vue比較常見的坑就是數(shù)據(jù)(后臺返回)更新了,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue移動端自適應，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要給大家介紹了關于Vue3項目中引入html頁面的相關資料,Vue3是一個JavaScript框架,通常我們使用它來構建單頁應用程序(SPA),如果你想在HTML頁面中使用Vue3,可以參考這篇文章,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設置詳細的相關資料,需要的朋友可以參考一下文章得具體內容，希望對你有所幫助2021-10-10
這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應的對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vuex中mutations與actions的區(qū)別詳解
下面小編就為大家分享一篇Vuex中mutations與actions的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue如何使用js對圖片進行點擊標注圓點并記錄它的坐標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue頁面批量引入組件,本文結合示例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12