效果一:
//第一种:el-popover
<el-popover
placement="right"
title=""
width="200"
trigger="hover"
:content="baseURL+'/xxx/xxx/xxx/xxx/xxx?authorization=xxx&id='+scope.row.id">
<el-button slot="reference"
class="popoverBtn"
@click="copyTemplate(scope.row.id)">
商品地址复制按钮
</el-button>
</el-popover>
效果二:
//第二种:el-tooltip
<el-tooltip class="item"
effect="dark"
:content="baseURL+'/wechat/api/single/pms/getposter?id='+scope.row.id"
placement="top">
<el-button style="padding: 5px 5px;" @click="copyTemplate(scope.row.id)">商品地址</el-button>
</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