vue3使用ClipboardJS插件的方式

建個工具類，以進行不同地方的調用複用。

調用方式,options參數的使用看自個的需求。

---

html調用方式

<div data-clipboard-text="copy content" ref="copyDom" @click="copyContent(copyDom)" >複製我</div>

vue組件調用方式

<my-div data-clipboard-text="copy content" ref="copyRef" @click="copyContent(copyRef.$el)" >複製我</my-div>

---

工具類

import ClipboardJS from 'clipboard'
import { Toast } from 'vant';


export function copyContent(el,options={}){
    let clipboard = new ClipboardJS(el, options)
    clipboard.on('success', e => {
        Toast('複製成功');
        // 釋放內存
        clipboard.destroy();
    })
    clipboard.on('error', e => {
        console.error('複製失敗:', e);
        // 不支持複製
        Toast.fail('複製失敗');
        // 釋放內存
        clipboard.destroy()
    })

    // 手動觸發元素的調用
    el.click();
}

引用

clipboardjs插件