vue element-ui 后台中实现点击按钮，将文本内容复制

效果一：

//第一种: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