document.execCommand('copy')复制上一

需要实现一个复制粘贴的功能，找资料发现了document.execCommand('copy')这个宝藏

    <span
      style="margin-left: 0.3rem; cursor: pointer"
      @click="copyClick"
      class="el-icon-document-copy"
    ></span>
    <textarea
      id="copy-field"
      cols="30"
      style="position: absolute; left: -99999rem"
      v-model="copy_text"
      rows="10"
    ></textarea>

//这里是用copy_text给textArea赋值
this.copy_text = arr.join("\n");//arr是组装好的数据
document.getElementById("copy-field").select();
let bool = document.execCommand("Copy");
let result = bool ? '复制成功' : '复制失败'；

我这么做之后，一直得到上一次复制的内容。后来读API发现，其实select()方法用的其实是前面的value，于是我打印了document.getElementById("copy-field").value，发现一直是上一次的值，总算知道是怎么回事了。但是确切的原因还是不清楚，可能是vue的机制？以前在一个文件中可以复制成功，这次我把复制单独拆成了一个组件，就不可以了。哪位大佬知道原因可以回复一下。

改进方法：创建并及时销毁element
参照(29条消息) JS实现copy功能_busishenren的博客-CSDN博客_copy js

    copy(copyContent){
      let textareaElement = document.createElement('textarea'); 
      textareaElement.setAttribute('readonly', 'readonly'); // 防止弹出输入编辑
      textareaElement.value = copyContent; //将需要拷贝的内容设置到textarea元素中。
      document.body.appendChild(textareaElement ); 
      textareaElement.select(); //选中textarea元素，以备调用系统copy函数复制其中的内容。
      let isSuccess = document.execCommand('copy'); //调用操作系统复制api，返回是否复制成功。true或false！
      document.body.removeChild(textareaElement);
      return isSuccess;
    } 

这次可以保证要复制的value就是创建的value，终于解决这个问题啦，开心！