效果一：
//第一種: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)">
商品地址復(fù)制按鈕
</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:{
// 復(fù)制模板內(nèi)容
copyTemplate(id){
let value = this.baseURL+'/xxx/xxx/xxx/xxx/xxx?authorization=&id='+id;
this.copyToClipboard(value); // 需要復(fù)制的文本內(nèi)容
this.$message.success('復(fù)制成功窃款，注意帶變量字段內(nèi)容請(qǐng)自行替換再膳！');
},
// 點(diǎn)擊復(fù)制到剪貼板函數(shù)
copyToClipboard(content){
//window.clipboardData的作用是在頁(yè)面上將需要的東西復(fù)制到剪貼板上醉旦，
//提供了對(duì)于預(yù)定義的剪貼板格式的訪問，以便在編輯操作中使用恒界。
if (window.clipboardData) {
/*
window.clipboardData有三個(gè)方法:
（1）clearData(sDataFormat) 刪除剪貼板中指定格式的數(shù)據(jù)睦刃。sDataFormat:"text","url"
（2）getData(sDataFormat) 從剪貼板獲取指定格式的數(shù)據(jù)。 sDataFormat:"text","url"
（3）setData(sDataFormat, sData) 給剪貼板賦予指定格式的數(shù)據(jù)十酣。返回 true 表示操作成功涩拙。
*/
window.clipboardData.setData('text', content);
} else {
(function (content) {
//oncopy 事件在用戶拷貝元素上的內(nèi)容時(shí)觸發(fā)枣宫。
document.oncopy = function (e) {
e.clipboardData.setData('text', content);
e.preventDefault(); //取消事件的默認(rèn)動(dòng)作
document.oncopy = null;
}
})(content);
//execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔/當(dāng)前選擇/給出范圍的命令。
//'Copy':將當(dāng)前選中區(qū)復(fù)制到剪貼板吃环。
document.execCommand('Copy');
}
},
}
引用插件#ZeroClipboard.js或#clipboard.js實(shí)現(xiàn)不區(qū)分瀏覽器的復(fù)制
參考文章：后臺(tái)中實(shí)現(xiàn)點(diǎn)擊按鈕也颤，將文本內(nèi)容復(fù)制到剪貼板
document.execCommand()的用法小記
ZeroClipboard.js
clipboard.js
