在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);
},