Vue實現(xiàn)點擊按鈕復制文本內(nèi)容的例子
更新時間：2019年11月09日 15:49:50 作者：小破孩呦
今天小編就為大家分享一篇Vue實現(xiàn)點擊按鈕復制文本內(nèi)容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
點擊復制功能主要通過 clipboard.js 來實現(xiàn)
在vue中使用clipboard.js 時候發(fā)現(xiàn)一個問題，就是如果不是input或者button 按鈕的話，則復制不成功，使用步驟如下：
1、引入clipboard.js，方法如下：
第一種直接npm安裝：npm install clipboard --save
第二種：<script src="js/clipboard.min.js"></script>（下載地址：https://clipboardjs.com/）
2、在需要使用的組件中import
引用方法：import Clipboard from 'clipboard';
3、添加需要復制的內(nèi)容
例如：<button class="tag-read" data-clipboard-text="我是可以復制的內(nèi)容，請點擊復制" @click="copy">立即閱讀</button>
解析： data-clipboard-text 后邊跟需要復制的內(nèi)容
4、添加點擊后的方法
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
console.log('復制成功')
// 釋放內(nèi)存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復制
console.log('該瀏覽器不支持自動復制')
// 釋放內(nèi)存
clipboard.destroy()
})
}
以上這篇Vue實現(xiàn)點擊按鈕復制文本內(nèi)容的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue3 座位選座矩陣布局的實現(xiàn)方法(可點擊選中拖拽調(diào)換位置)
由于公司項目需求需要做一個線上設置考場相關的座位布局用于給學生考機排號考試,實現(xiàn)教室考場座位布局的矩陣布局,可點擊選中標記是否有座無座拖拽調(diào)換位置橫向縱向排列,本文給大家分享實現(xiàn)代碼,一起看看吧2023-11-11
這篇文章主要介紹了vue使用技巧及vue項目中遇到的問題,本文給大家?guī)淼闹皇且徊糠郑罄m(xù)還會持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學習吧2018-06-06
vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能
這篇文章主要介紹了vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue動態(tài)組件component的深度使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關于vue.js項目中實用的小技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
Element-UI Table組件上添加列拖拽效果實現(xiàn)方法
這篇文章主要為大家詳細介紹了Element-UI Table組件上添加列拖拽效果的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
現(xiàn)在,很多登陸表單都會使用密碼加密,為登錄安全,登錄表單輸入密碼,會加密后傳入后臺,本文就來介紹一下Vue3實現(xiàn)密碼加密登錄的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
​ vue-element-admin是一個純前端的框架，左側菜單是根據(jù)路由生成的。實際開發(fā)中經(jīng)常需要根據(jù)當前登陸人員的信息從后端獲取菜單進行展示，本文將詳細介紹如何實現(xiàn)該功能2021-04-04
這篇文章主要給大家介紹了關于前端vue3手動設置滾動條位置/自動定位的相關資料,文中通過代碼介紹的非常詳細,對大家學習學習或者使用vue3具有一定的參考解決價值,需要的朋友可以參考下2024-05-05