分享点击复制文本的插件

今天给了一个需求就是点击文本然后赋值文本内容

  // 使用插件clipboard
  // 首先使用npm install clipboard --save 下载
  // 在需要的页面内引入 

     import Clipboard from 'clipboard';
//在需要使用的页面引入也可以min.js全局引入

  // ps该插件如果不是input或者button 按钮的话，则复制不成功
  // 比如<button class="tag-read" :data-clipboard-text="text" @click="copy">复制文本</button>

copy() {
//text是你要复制的内容
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          console.log('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })
}

如果不能用插件还有一种方法

<div class="copy-btn2" @click="copyOrderId2('复制成功了')"><i class="el-icon-document-copy"></i>复制链接</div>
 
copyOrderId2(orderId) {
     var input = document.createElement("input"); // 创建input对象
     input.value = orderId; // 设置复制内容
     document.body.appendChild(input); // 添加临时实例
     input.select(); // 选择实例内容
     document.execCommand("Copy"); // 执行复制
     document.body.removeChild(input); // 删除临时实例
     this.$message.success('复制成功！');
},