Vue实现复制功能

实现功能：点击button，复制input框的值

document.execCommand 将当前选中区复制到剪贴板

<input id="input" type="text" value="复制的内容"/>
<button @click=copy()>复制按钮</button>
function copy() {
  var copyText = document.querySelector("#input");
  copyText.select();
  document.execCommand("Copy");
}

clipboard实现点击复制

• npm install clipboard —save

• 将待复制的值放在 data-clipboard-text 中，当点击该标签的时候就会将该值复制到剪贴板

  <button data-clipboard-text="将文本内容放在clipboard text中实现复制" class="tag-read" @click="copy">
    点击复制（将文本内容放在clipboard text中实现复制）
  </button>

• 通过 data-clipboard-target 从另一个元素复制文本 ```html

  <input type="text" id="copyText" >

  立即阅读

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