vue clipboard.js复制异步获取到的数据_综合

问题：Clipboard.js复制通过接口获取到的数据，复制失败（在Clipboard.js的复制操作中，不能包含任何异步的操作，即便包含，复制的还是copyData之前的值。）

解决方法：

思路：页面新创建一个DOM节点，将获取到的赋值内容赋值给data-clipboard-text属性，页面渲染完成后，模拟点击复制。记得将新创建的节点在页面隐藏

代码：

html:

//复制链接按钮  
<buttonclass="preview_goods preview_handle"key="indexs"@click="handleCopy(item,indexs)"><img src="../assets/img/icon/preview_handle.png" alt="" /><p class="button-preview">复制链接</p>
</button>//模拟复制节点
<span class="copyU" ref="copy" :data-clipboard-text="url" @click="copy"></span>

js：

    // 获取链接，并模拟点击async handleCopy(goods, indexs){const res = await this.$store.dispatch("getShortUrlByGoodsIdAndStaffPhone", {goodsId: goods.goodsInfo.goodsId,})if (res.statusCode == 200) {this.url = res.data// 兼容iosthis.$forceUpdate()setTimeout(()=>{//模拟点击真正复制链接的按钮 this.$refs.copy.click();},10)}else{Toast(res.alertMsg);}},//复制方法copy(evnet){evnet.preventDefault()let clipboard = new Clipboard('.copyU')clipboard.on('success', e => {Toast('复制成功')// 释放内存clipboard.destroy()})clipboard.on('error', e => {// 不支持复制Toast('该浏览器不支持自动复制')// 释放内存clipboard.destroy()})},