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項(xiàng)目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫，具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了Vue中props報(bào)錯(cuò)問題解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要為大家介紹了VueUse使用及造輪子選擇對(duì)比示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了詳解vue幾種主動(dòng)刷新的方法總結(jié)，文中詳細(xì)的介紹了幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(一)
這篇文章將利用Vue3和Canvas編寫一個(gè)童年經(jīng)典游戲—坦克大戰(zhàn)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快來跟隨小編一起學(xué)習(xí)一下吧2022-03-03
vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建的實(shí)現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動(dòng)端H5項(xiàng)目搭建，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
使用el-checkbox-group選中后值為true和false遇到的坑
這篇文章主要介紹了使用el-checkbox-group選中后值為true和false遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解基于element的區(qū)間選擇組件校驗(yàn)(交易金額)
這篇文章主要介紹了詳解基于element的區(qū)間選擇組件校驗(yàn)(交易金額)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01