VUE自【定义指令】实现=＞防止重复点击

方法一：【延时触发事件，短时间内不能重复点击】

创建一个preventReClick.js文件：

import Vue from 'vue'

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

/*传参的点击事件*/
    Vue.directive('preventDbClick',function(el,binding){
        el.οnclick=function(e){
            if(openDalay) return;
            openDalay = !openDalay
            setTimeout(()=>{
                openDalay = !openDalay
            },1000)
            binding.value.func(binding.value.data)
        }
    });
}

export default preventReClick
 

main.js中引用：

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

.vue文件template中：

提交

methods方法中：

submitGo(data){
       console.log(data)/*输出[1,2,3]*/
}

方法二：【改变按钮加载状态，请求成功后才能再次点击】

点击

test(data){
      this.isLoading=true;
      console.log('-------')

如果有请求，这里调用请求接口，代替setTimeout,请求成功后设置this.isLoading=false
      setTimeout(()=>{
        this.isLoading=false;
        console.log(data)
      },1000)
 },