vue 使用clipboard.js从后端获取数据后复制到剪切板

1、安装clipboard

npm install clipboard --save 2、引入

import Clipboard from 'clipboard';

3、封装一个clipboard.js公共文件：

import Clipboard from 'clipboard';
import Vue from 'vue'
export default function handleCopy(text, event) {
    event = event || {};
    const clipboard = new Clipboard(event.target, {
        text: () => text,
    });
    clipboard.on('success', () => {
       Vue.prototype.$message.success('复制成功')
        clipboard.destroy();
    });
    clipboard.on('error', () => {
       Vue.prototype.$message.error('复制失败')
        clipboard.destroy();
    });
    clipboard.onClick(event);//此行的作用是可以点击就复制，否则需要双击才能复制
}

4、使用

首先引入公共clipboard.js import handleCopy from '@/utils/clipboard.js';

可以直接在click的对象中使用，也可以声明一个专门的dom对象
（1）声明一个专门dom对象用于发出对应的事件节点

<button  @click="generateCode">点击生成邀请码并自动复制</button>
<button ref="copy"  @click="copy" style="opacity: 0;"></button>

generateCode(){

    axios.get(url, params).then(res => {
        this.code = res.data.code //存储取回的邀请码
        //发布copy节点的click事件
        this.$refs.copy.dispatchEvent(new Event("click"))
    })
}

copy(e)
        handleCopy('要复制的内容', e)
},

（2）直接在点击的click方法里先请求接口获取数据，然后再调用handleCopy，此时要注意最好给dom对象取个id，或者唯一的class类名，否则会报错

<button id="btn_generate"  @click="generateCode">点击生成邀请码并自动复制</button>

对应的generate方法为：

generateCode(e){
    //请求后端接口取数据
    axios.get(url, params).then(res => {
        this.code = res.data.code //存储取回的邀请码
        //调用handleCopy
          handleCopy(this.code, e)
        
    })
}