剪贴板 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 处理需要复制的内容,比较灵活,可以复制任何内容。我一般使用这种方法。
比如这里我有一个自定义的元素,在点击的时候复制它的卡号。
核心代码如下
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 避免弹出多个复制成功提示框
}
四、结果
正常复制成功后会提示
但如果没有 destroy
那一步,就会再现这样的情况。
原因是在切换页面时,当前页面重载时,之前的实例并没有销毁,全部响应了。