vue 自定义命令 v-copy 复制文字

---

因为项目使用的地方较多

前言

二、使用步骤

1.全局引入vue-clipboard2 （npm i vue-clipboard2）

代码如下（示例）：

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

2.通过directive 自定义命令 v-copy

代码如下（示例）：

import Vue from 'vue';

Vue.directive('copy',{
    bind:(el,bindings)=>{
        console.log(bindings.value,el)
    // let flag = false;
    let copyText = Vue.prototype.$copyText;
    el.addEventListener("click",function(event){
        // flag = true;
        event.stopPropagation();
        // console.log("执行单击事件",bindings.value,copyText);
        copyText(bindings.value).then(
            (e) => {
                // console.log('复制前',flag)
                // if(flag){
                    Vue.prototype.$message.success("复制成功");
                // }
                // flag = false;
                // console.log('复制完',flag)
            },
            (e) => {
                // if(flag){
                    Vue.prototype.$message.error("复制失败");
                // }
                // flag = false;
            }
        );
        
        // el.removeEventListener("click", () => {
            
        // })

    });
    }
})

3.直接使用到元素上 即刻复制文字

<div slot="code" slot-scope="text,record" v-copy='text' :id='record.id'>{{text}}</div>

---

总结

提示：这里对文章进行总结：

项目需求复制文字，唯有写个自定义命令 给项目成员用，
就记录一波咯，
有错 更优麻烦 指教一下