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> //帶多個叄