點(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)容集畅，請(qǐng)點(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è)參考挺智，也希望大家多多支持。
文章轉(zhuǎn)自http://www.45fan.com/article.php?aid=19110993656406594812908197
