vue实现复制文本剪贴板

原理：浏览器本身提供了一个copy命令，利用它可以复制选中的内容：如果是输入框，我们可以利用select()方法来选中输入框中的内容，然后调用copy命令，将文本复制到剪切板，但是select()方法只对<input>和<textarea>有效，对于其他标签就不太好使了

copyText(id) {
      const copyDOM = document.getElementById(id) // 获取将要复制的dom
      if (!copyDOM) {
        this.$message.warning('没有内容')
        return
      }
      // 创建text area元素
      const textArea = document.createElement('textarea')
      textArea.value = copyDOM.innerText // 赋值
      // 使text area不在viewport，同时设置不可见
      textArea.style.position = 'absolute'
      textArea.style.opacity = '0'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea) //在body添加节点
      textArea.focus()
      textArea.select() // 选中文本
      const successful = document.execCommand('copy') // 执行 copy 操作
      if (successful) {
        this.$message.success('复制成功！')
      } else {
        this.$message.warning('复制失败，请手动复制！')
      }
      textArea.remove()
    }

在纯html当中通过getElementById api获取dom元素是没有问题的，但在vue中这样获取dom元素会导致复制失效，使用this.$refs也一样会失效