标签：Toast vue res js clipboard Clipboard 复制

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

解决方法：

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

代码：

html:

//复制链接按钮  
<button
  class="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
          this.$nextTick(_=>{
           this.$refs.copy.click()
          })
        }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()
        })
    },

标签：Toast,vue,res,js,clipboard,Clipboard,复制
来源： https://blog.csdn.net/qq_38614249/article/details/116744509

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。