【爬坑笔记】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.
我的邮箱[e-mail],欢迎指教。:)