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