在vue中使用document.execCommand实现复制文本的功能

在vue中复制文本

项目中需要实现的功能：展示出来直播地址 超出隐藏，后面有个复制按钮，点击可以复制地址
html代码：

<div>
  <span>{{watch_url }}</span>
  <div
    @click="copy(watch_url)"
  >
    复制
  </div>
</div>

JS代码：

copy(e) {
  //创建一个input框
  const input = document.createElement("input");
  //将指定的DOM节点添加到body的末尾
  document.body.appendChild(input);
  //设置input框的value值为直播地址
  input.setAttribute("value", e);
  //选取文本域中的内容
  input.select();
  //copy的意思是拷贝当前选中内容到剪贴板
  //document.execCommand（）方法操纵可编辑内容区域的元素
  //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
  if (document.execCommand("copy")) {
    document.execCommand("copy");
  }
  //删除这个节点
  document.body.removeChild(input);
},