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

Posted 2020-12-16 my466879168

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