vue實(shí)現(xiàn)點(diǎn)擊復(fù)制功能，借助Clipboard插件

1.npm i Clipboard -s
2.在main.js里引入并掛
import Clipboard from ‘clipboard’ // 復(fù)制
Vue.prototype.Clipboard=Clipboard
3. 在頁(yè)面中使用
<span class=“copy” id=“bar” slot=“content” :data-clipboard-text=“orderData.expressNumber” @click=“copy”>復(fù)制
1）這里data-clipboard-text是你要復(fù)制的內(nèi)容，這里我取得是動(dòng)態(tài)的
2）點(diǎn)擊事件
4. 在methods中寫入方法
copy() {
var clipboard = new this.Clipboard(’.copy’)
clipboard.on(‘success’, e => {
// 成功提示
Toast({
message: ‘復(fù)制成功’,
position: ‘bottom’,
duration: 800
});
// Toast(‘復(fù)制成功’)
e.clearSelection() // 釋放內(nèi)存
})
// 瀏覽器不支持
clipboard.on(‘error’, e => {
Toast({
message: ‘不支持’,
position: ‘bottom’,
duration: 800
});
// 釋放內(nèi)存
clipboard.destroy()
})
}

總結(jié)

以上是生活随笔為你收集整理的vue实现点击复制的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。