1、在package.json添加依赖"dependencies":{
"clipboard":"^2.0.0"
}
2、页面引入clipboardimportClipboardfrom'clipboard';
3、给触发复制事件的按钮增加class,增加点击事件
H函数实现:h('Button',{
props:{
type:'info',
size:'small',
icon:'ios-link'
},
class:['link-copy'],
on:{
click:()=>{
this.copyLink(params.row)
}
}
},'')
页面实现:新建
4、method中写入点击事件copyLink(row){
//复制访问链接
constclipboard=newClipboard('.link-copy',{
//点击copy按钮,直接通过text直接返回复印的内容
text:()=>row.webSiteVisitUrl,//该文本则为需要复制的内容
});
//通过传递DOM选择器,HTML元素或HTML元素列表实例化
clipboard.on('success',(e)=>{
this.$Message.success('拷贝到剪切板成功!');
e.clearSelection();
//释放内存
clipboard.destroy();
});
clipboard.on('error',(e)=>{
//不支持复制
this.$Message.error({
content:`该浏览器不支持自动复制,请手动复制链接:${e.text}`,
duration:30,
closable:true
});
//释放内存
clipboard.destroy();
});
}
本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客