效果一:
//第一种:el-popover
商品地址复制按钮
效果二:
//第二种:el-tooltip
商品地址
代码:
methods:{
// 复制模板内容
copyTemplate(id){
let value = this.baseURL+'/xxx/xxx/xxx/xxx/xxx?authorization=&id='+id;
this.copyToClipboard(value); // 需要复制的文本内容
this.$message.success('复制成功,注意带变量字段内容请自行替换!');
},
// 点击复制到剪贴板函数
copyToClipboard(content){
//window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上,
//提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用。
if (window.clipboardData) {
/*
window.clipboardData有三个方法:
(1)clearData(sDataFormat) 删除剪贴板中指定格式的数据。sDataFormat:"text","url"
(2)getData(sDataFormat) 从剪贴板获取指定格式的数据。 sDataFormat:"text","url"
(3)setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
*/
window.clipboardData.setData('text', content);
} else {
(function (content) {
//oncopy 事件在用户拷贝元素上的内容时触发。
document.oncopy = function (e) {
e.clipboardData.setData('text', content);
e.preventDefault(); //取消事件的默认动作
document.oncopy = null;
}
})(content);
//execCommand方法是执行一个对当前文档/当前选择/给出范围的命令。
//'Copy':将当前选中区复制到剪贴板。
document.execCommand('Copy');
}
},
}
引用插件#ZeroClipboard.js或#clipboard.js实现不区分浏览器的复制
参考文章:后台中实现点击按钮,将文本内容复制到剪贴板
document.execCommand()的用法小记
ZeroClipboard.js
clipboard.js