解決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);
},