Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子
點(diǎn)擊復(fù)制功能主要通過 clipboard.js 來實(shí)現(xiàn)
在vue中使用clipboard.js 時(shí)候發(fā)現(xiàn)一個(gè)問題，就是如果不是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('該瀏覽器不支持自動(dòng)復(fù)制')
// 釋放內(nèi)存
clipboard.destroy()
})
}
以上這篇Vue實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Element Dropdown下拉菜單的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了從零到一詳聊如何創(chuàng)建Vue工程及遇到的常見問題 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡潔易懂,對我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09
這篇文章主要介紹了vue中引用swiper輪播插件的方法,在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里。具體實(shí)例代碼大家跟隨腳本之家小編一起看看吧2018-08-08
Driver.js是一個(gè)功能強(qiáng)大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導(dǎo)庫，本文主要介紹了Vue使用driver.js做引導(dǎo)頁，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue ssr 指南詳讀,詳細(xì)的介紹了什么是SSR以及如何使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題
這篇文章主要介紹了解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況分析
這篇文章主要介紹了Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04