vue中粘贴板clipboard的使用方法举例
作者：Diane_24
在Web应用程序中剪贴板(Clipboard)操作是非常常见的操作之一,这篇文章主要给大家介绍了关于vue中粘贴板clipboard使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、npm安装clipboard
npm install clipboard --save
二、页面结构
<span id="copyTarget">{{targetCode}}</span>
<span id="copyBtn" @click="copy">复制</span>targetCode是被复制的文本
三、引入Clipboard
import Clipboard from "clipboard";
四、copy方法
//粘贴板方法
initClipboard(copyDom){
// 因为此事件不能添加.stop，所以要设置一个开关, 500ms后打开开关
this.itemIsDisabled = true
setTimeout(()=>{
this.itemIsDisabled = false
}, 500)
let clipboard = new Clipboard(copyDom,{
text:function(){
return document.querySelector(copyDom).innerHTML //复制的内容
}
});
clipboard.on('success', e => {
console.log(this, '复制成功!', 'success', e);
clipboard.destroy()
})
clipboard.on('error', e => {
console.log(this, '该浏览器不支持自动复制!', 'warning', e);
clipboard.destroy()
})
},
//点击复制
copy(){
this.initClipboard('#copyBtn')
}copy方法不能添加.stop等修饰符，所以如果有需求，我的解决方法是添加一个定时器开关，点复制，让开关关闭500ms，在父元素的时间中判断itemIsDisabled就行了。
success事件中，需要注意this的指向问题。this测试不是指向vue实例
其他用法
如果你不想修改 HTML，提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。
例如, 你希望动态设置target, 你需要返回一个node节点.
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
如果你希望动态设置text, 你需要返回字符串。
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container属性的值。
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();总结
到此这篇关于vue中粘贴板clipboard的使用方法的文章就介绍到这了,更多相关vue粘贴板clipboard用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！