vue中粘貼板clipboard的使用方法舉例
一、npm安裝clipboard
npm install clipboard --save
二、頁面結(jié)構(gòu)
<span id="copyTarget">{{targetCode}}</span>
<span id="copyBtn" @click="copy">復(fù)制</span>targetCode是被復(fù)制的文本
三、引入Clipboard
import Clipboard from "clipboard";
四、copy方法
//粘貼板方法
initClipboard(copyDom){
// 因?yàn)榇耸录荒芴砑?stop，所以要設(shè)置一個(gè)開關(guān), 500ms后打開開關(guān)
this.itemIsDisabled = true
setTimeout(()=>{
this.itemIsDisabled = false
}, 500)
let clipboard = new Clipboard(copyDom,{
text:function(){
return document.querySelector(copyDom).innerHTML //復(fù)制的內(nèi)容
}
});
clipboard.on('success', e => {
console.log(this, '復(fù)制成功!', 'success', e);
clipboard.destroy()
})
clipboard.on('error', e => {
console.log(this, '該瀏覽器不支持自動(dòng)復(fù)制!', 'warning', e);
clipboard.destroy()
})
},
//點(diǎn)擊復(fù)制
copy(){
this.initClipboard('#copyBtn')
}copy方法不能添加.stop等修飾符，所以如果有需求，我的解決方法是添加一個(gè)定時(shí)器開關(guān)，點(diǎn)復(fù)制，讓開關(guān)關(guān)閉500ms，在父元素的時(shí)間中判斷itemIsDisabled就行了。
success事件中，需要注意this的指向問題。this測試不是指向vue實(shí)例
其他用法
如果你不想修改 HTML，提供了一個(gè)非常方面的命令式的 API 給你使用。你需要做的就是聲明一個(gè)函數(shù)，做一些處理，并返回一個(gè)值。
例如, 你希望動(dòng)態(tài)設(shè)置target, 你需要返回一個(gè)node節(jié)點(diǎn).
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
如果你希望動(dòng)態(tài)設(shè)置text, 你需要返回字符串。
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
如果在 Bootstrap 模態(tài)框（Modals）中使用，或是在其他修改焦點(diǎn)的類庫中使用，你會(huì)希望將獲得焦點(diǎn)的元素設(shè)置為 container屬性的值。
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
同樣地，如果你使用單頁應(yīng)用，你可能想要更加精確地管理 DOM 的生命周期。你可以清理事件以及創(chuàng)建的對(duì)象。
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();總結(jié)
到此這篇關(guān)于vue中粘貼板clipboard的使用方法的文章就介紹到這了,更多相關(guān)vue粘貼板clipboard用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?Vue?中,provide?和?inject?是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,本文主要來和大家詳細(xì)講講provide和inject的使用方法,希望對(duì)大家有所幫助2024-02-02
element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時(shí),會(huì)造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動(dòng)解決卡頓問題,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單
這篇文章主要介紹了vue后臺(tái)管理如何配置動(dòng)態(tài)路由菜單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小完整代碼
這篇文章主要給大家介紹了關(guān)于vue前端獲取/切換麥克風(fēng)、播放采集音頻和采集音量大小的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼
在商場大家經(jīng)?？吹酵＼囀召M(fèi)倒計(jì)時(shí)支付頁面,今天小編通過本文給大家分享vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面功能,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-05-05
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
小編這次要給大家分享的是如何實(shí)現(xiàn)vue2.x數(shù)組劫持，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
解決vue 綁定對(duì)象內(nèi)點(diǎn)擊事件失效問題
今天小編就為大家分享一篇解決vue 綁定對(duì)象內(nèi)點(diǎn)擊事件失效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09