vue中使用clipboard实现文本复制功能

1、安装clipboard.js依赖

地址：https://github.com/zenorocha/clipboard.js

yarn add clipboard  或 npm install clipboard --save

2、封装一个文本复制的组件

先在组件文件夹下，如utils目录下新建 clipboard.js 文件

写入以下代码：
import Clipboard from 'clipboard';

function clipboardSuccess() {
    console.log("复制成功")
    //你可以在这里设置你的提示
}
function clipboardError() {
    console.log("复制失败")
}

export default function handleCopy(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', () => {
        onError ? onError() : clipboardError();
        clipboard.off('error');
        clipboard.off('success');
        clipboard.destroy();
    });
    clipboard.onClick(event);
}

3、引用及使用组件

<div @click="copyValue('嘻嘻', $event)">点我</div>


import handleCopy from '@/utils/clipboard'

methods:{
    copyValue(text, e){
        let value=text  //这里设置你要复制的文本信息，可以是text，也可以从e中获取，也可以自定义
        handleCopy(value, e, ()=>{
            console.log("这是复制成功回调函数")
            alert("复制成功！")
        },()=>{
            console.log("这是复制失败回调函数")
        })
    }
}