0
点赞
收藏
分享

微信扫一扫

剪贴板 Clipbardjs 的使用教程,Vue

剪贴板 Clipbardjs 的使用教程,Vue

官方API ​​https://github.com/zenorocha/clipboard.js​​

一、添加对应包

package.json

"clipboard": "^2.0.8"

二、引用 clipboardjs

在需要使用 ​​clipboardjs​​ 的页面中引用它

import ClipboardJS from "clipboard"

三、使用方法

1. 复制固定内容

第一种方法,是直接把需要复制的内容绑定到对应的 dom 元素上的 ​​data-clipboard-text​​ 属性上,当点击它的时候就会复制这个内容了。

<button class="btn" data-clipboard-text="这里是复制的内容">
let clipboard = new ClipboardJS('.btn')

clipboard.on('success', function (e) {
console.info('Action:', e.action)
console.info('Text:', e.text)
console.info('Trigger:', e.trigger)
e.clearSelection()
})

2. js 复制任意内容

第二种方法是通过 js 处理需要复制的内容,比较灵活,可以复制任何内容。我一般使用这种方法。

比如这里我有一个自定义的元素,在点击的时候复制它的卡号。

剪贴板 Clipbardjs 的使用教程,Vue_javascript

核心代码如下

Vue

<div title="复制卡号" 
class="operation-btn clipboard"
:dataClipboard='card'>
<i class="el-icon-document-copy"></i>
</div>

JS

data(){
return {
clipboard: null // 存放当前创建的 clipboard 对象,用于页面卸载时删除,避免出现切换页面时多次复制的情况
}
},
mounted(){
// 1. 绑定剪贴板操作方法
this.clipboard = new ClipboardJS('.clipboard', {
text: function (trigger) {
// 2. trigger 就是点击的 dom 元素,所以就可以通过它来获取到它的属性 'dataClipboard' 的值了
// 3. 从这个方法返回的 string 就是会复制到剪贴板中的内容,所以可以复制任何内容了,也可以在这里处理一些逻辑
// 4. 我在这里就只是单纯的输出了事先绑定好的值
return trigger.getAttribute('dataClipboard')
},
})
// 5. 当复制成功的时候提示复制成功
this.clipboard.on('success', ()=>{ // 还可以添加监听事件,如:复制成功后提示
this.$message.success('复制成功')
})
},
beforeDestroy(){
this.clipboard.destroy() // 6. 销毁 clipboard 避免弹出多个复制成功提示框
}

四、结果

正常复制成功后会提示
剪贴板 Clipbardjs 的使用教程,Vue_前端_02

但如果没有 ​​destroy​​​ 那一步,就会再现这样的情况。
原因是在切换页面时,当前页面重载时,之前的实例并没有销毁,全部响应了。

剪贴板 Clipbardjs 的使用教程,Vue_剪贴板_03


举报

相关推荐

0 条评论