vue内单个组件内使用clipboard.js实现多次复制功能遇到的坑

描述一下之前做过的一个需求,一个订单详情页面内同时存在多个复制按钮,点击复制按钮时,分别拷贝对应的文本,并触发相应事件。
看了一下官网的描述,官方推荐的写法如下:

<button class="btn" data-clipboard-text="传入文本"\> Copy to clipboard </button>

这样的写法用于页面内仅有一个复制button时是没有问题的,但是我当前遇到的需求是,页面内存在N个复制button,点击时就出现了重复复制上一个传入文本的问题。在翻了很多相关使用clipboard.js的文章后,发现还是没有找到好的解决方案。自己瞎捣鼓了一套解决方案,附上代码,大家如有遇到类似的需求,也可以尝试从这个方向来解决问题。

//template部分,省略多个类似button定义
//couponItem为外层传入的券码对象,对象内仅包含券码和一个状态值

<button 
class="button--copy tc btn"
:id="'product-'+couponItem.coupon"
 @click="copyText(`#product-${couponItem.coupon}`, true)"
 :data-clipboard-text="couponItem.coupon"
 >复制</button>
 
 
 import Clipboard from 'clipboard' //需要提前npm该插件
 
 //methods部分
 copyText (copyId, status) {
      let clipboard = new Clipboard(copyId, {
        text: function (trigger) {
          return trigger.getAttribute('data-clipboard-text')
        }
      })
      clipboard.on('success', e => {
        if (status) {
          this.doSomething()// 执行相关操作
          console.log('券码复制成功')
        } else {
          console.log('复制成功')
        }
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        clipboard.destroy()
      })
    }
    
    // 调用方法完必须销毁clipboard,以免后续调用时复制的值错乱

button内的传入id为自定义产生的一个唯一值,可根据实际情况自定义传入参数。(但是必须保证其唯一性)

大家如果有更简单的解决方案也欢迎大家留言,互相学习下。For love and peace.

阅读 90

推荐阅读