1、在package.json添加依赖"dependencies": {
"clipboard": "^2.0.0"
}
2、页面引入clipboardimport Clipboard from '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) {
// 复制访问链接
const clipboard = new Clipboard('.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();
});
}
本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客panghucat.cn