vue 复制到剪切板 公共方法组件 clipboard 第一次没反应第二次成功

背景：使用clipboard时候想提出组件，后续发现第一次没反应第二次成功
原理：clipboard是创建一个dom监听，然后点击dom时候复制并触发回调函数。所以第一次点击时候是创建监听，第二次点击才能被监听到
解决方案：
1、不提出组件，在mounted中初始化创建监听（不使用，因为不方便提出公共方法组件）
2、在每次点击时候多加一次点击（不推荐，不确定有无性能问题，毕竟创建了多个）
3、每次点击执行一遍创建监听->触发监听-> 销毁监听的整个生命周期，保证每次点击完毕后都卸载掉监听。

import Clipboard from 'clipboard'
// 复制粘贴插件
let clipboard = null
// init方法 创建监听
const clipboardInit = (content, clickEvent) => {
  clipboard = new Clipboard(clickEvent.target, {
    text: () => content
  })
  // 成功或失败时候触发回调函数，调用reset释放内存
  clipboard.on('success', () => {
    console.log('复制成功');
    clipboardReset()
  })
  clipboard.on("error", () => {
    console.log('复制失败')
    clipboardReset()
  })
}
// reset方法 释放内存
const clipboardReset = () => {
  clipboard.destroy()
  clipboard = null
}

// 复制粘贴 content：要复制的内容，clickEvent：点击事件
const copyToClipboard = (content, clickEvent) => {
  // init初始化监听
  clipboardInit(content, clickEvent)
  // 触发监听
  clipboard.onClick(clickEvent)
  // 释放内存在成功或失败的回调函数中
}
export {
  copyToClipboard
}

使用示例

<t-button variant="text" @click="handleCopy" :data-clipboard-text="returnInfo.value">点击复制</t-button>
+++++++++++++
handleCopy(e) {
  copyToClipboard(
    this.returnInfo.value,
    e
  )
}