vue3使用clipboard进行复制

1.安装依赖

npm install clipboard --save
 

2.使用

<button class="copy" data-clipboard-text="复制内容" @click="copy">复制</button>
 

import Clipboard from 'clipboard'

const copy = () => {
    let clipboard = new Clipboard('.copy')
    clipboard.on('success', (e) => {
        console.log('复制成功', e)
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制', e)
        // 释放内存
        clipboard.destroy()
    })
}
 

3.注意

data-clipboard-text中为复制内容，class名必须与new Clipboard()中的class名相同。
阻止冒泡@click.stop无法使用clipboard进行复制，改为使用其他方法实现。