vue自定义指令防止重复点击

封装一个自定义指令防止按钮重复提交。欢迎指正！

1、创建preventReClick.js文件

import Vue from 'vue'

const preventReClick = function(){
    let openDalay = false
    //不传参点击事件
    Vue.directive('click',function(el,binding){//不带参数
        el.onclick=function(e){
            if(openDalay) return;
            openDalay = !openDalay
            setTimeout(()=>{
                openDalay = !openDalay
            },1000)
            binding.value()
        }
    })
    Vue.directive('DataClick',function(el,binding){ //带参数
        el.onclick=function(e){
            if(openDalay) return;
            openDalay = !openDalay
            setTimeout(()=>{
                openDalay = !openDalay
            },1000)
            binding.value.func(...binding.value.data)
        }
    } );
}

export default preventReClick

2、main.js引入

import preventReClick from './assets/js/preventReClick'
Vue.use(preventReClick)

3、页面中应用

<div class="share" v-click="share"> </div> //不带参
<div class="xq_center" v-DataClick="{func:tabbar_btn,data:'a'}"></div> //带一个参
<div class="buy_center" v-DataClick="{func:tabbar_btn,data:['b',0,'9']}"></div> //带多个叁