经过踩坑,如果复制的内容是通过接口来的,不要用vue clipboard
(先说结果,用它,有bug,需要点两次才能复制好,网上有攻略是点击之前指向触发一次。但是库里会有两次调取记录,说近的你还需要上cdn搜,吃力不讨好)
重点来了,原生调用复制不香吗
(插件还要引入,多用原生,日后写H5受益)
<el-button size="mini" type="primary" @click="copy(xx)" >复制</el-button>
中间要声明copyData变量
async copy(id) {
let res=await api_u.getphone({
activityUserId:id})
this.copyData=res
var oInput = document.createElement('input');
oInput.value = this.copyData;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display='none';
this.$message.success("复制成功!")
}
为什么要创建一个dom?照做就好了… 直接复制就能成功,这个我也不懂~哈哈。有空想起来了会回来补充的。
————
创建一个dom对象(input),把值赋给他,把新对象加进去body(dom对象里),模拟用户行为选择它,执行复制。给新对象新增一个css类,然后隐藏该dom元素(因为新增dom元素时候,页面会多这么个html的~)