vue element-ui 后台中实现点击按钮,将文本内容复制到剪贴板

时间:2021-6-12 作者:qvyue

效果一:

vue element-ui 后台中实现点击按钮,将文本内容复制到剪贴板
//第一种:el-popover
 
    商品地址复制按钮
    

效果二:

vue element-ui 后台中实现点击按钮,将文本内容复制到剪贴板
//第二种: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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。