解决vue复制插件clipboard.js点击两次才能复制成功的问题

封装clipboard.js：

import Clipboard from "clipboard"
import Vue from "vue"

function clipboardSuccess() {
  Vue.prototype.$message.success("复制成功")
}

function clipboardError() {
  Vue.prototype.$message.error("复制失败")
}

export function copy(text, event, onSuccess, onError) {
  event = event || {}
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    onSuccess ? onSuccess() : clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    onSuccess ? onError() : clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

只需要增加 clipboard.onClick(event) 这行代码就行了，网上很多办法都写的乱七八糟的。

在vue文件中只需要引入封装好的js文件进行调用就可以了。

<i class="el-icon-copy-document" @click="handleCopy(alertTitle,$event)"></i>

import { copy } from "@/utils/clipboard";

handleCopy(text, e) {
  copy(text, e);
},