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插件