vue中实现文本复制功能（vue2、vue3均可使用）

方案一：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("这是复制失败回调函数")
        })
    }
}

方案二：vue中用clipboard2实现一键复制功能（不兼容vue3）

1、安装插件

yarn add vue-clipboard2

2、在main.js中配置

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

3、使用

<a-button v-clipboard:copy="url" v-clipboard:success="copySuc" v-clipboard:error="copyFail">复制链接</a-button>



copySuc(){
    this.$message.success("复制成功")
},

copyFail(){
    this.$message.success("复制失败")
}

4、若不成功，重启项目