按钮节流防抖 vueX 公共组件，防抖节流，$event事件，详细的防抖节流方法讲解，

按钮节流防抖 vueX 公共组件

我的此方法是按的按钮添加 disabled 为目的, 大佬可以直接看最底下

1. 以登录按钮为例

 <el-button type="primary" @click="submitForm('Form',$event)" class="denglu" >登录</el-button>

在点击按钮的时候传一个 $event

2.下一步到方法

 methods: {
// 登录相关
    async submitForm(Form,event) {
    	// 得用 this.$nextTick 获取执行完的参数
      this.$nextTick(()=>{
      	// 这是 vueX 的 mutations 中定义了 disChang 方法
      	// 他需要传参 event.currentTarget 
      	// event 都知道 这是你点击的按钮 
      	// event.currentTarget 是你绑定点击事件的那个元素  就是那个el-button
      	// 我们 log 一下  event.currentTarget 会得到什么  看下图
        this.$store.commit('disChang' ,event.currentTarget)
      })
      // 获取 vueX 的 state 定义的 disTrue 变量 
      // ==1 就代表 刚被点击过  所以直接 return 不执行下没按的接口  就做到了防抖节流的效果
      if(this.$store.state.disTrue ==1){
        return
      }
      //写你的就扣就好了
   }

我们 log 一下 event.currentTarget 会得这个按钮

这是我的登录写法 上面看懂了这个就不用看了

3. 最后一步

我们得在 vueX 做个方法了 ( disChang 方法)

mutations = {
	// disChang 方法需要两个参数 1 state 定义 disTrue 
	// 2 是 event  这个是要点击后改变按钮为 disabled  状态
	disChang(state ,event ) {
	// 判断 state.disTrue 是不是 1 , 是 1  证明刚被点击 直接提示 " 2s之内只能点击1次 "
    if (state.disTrue == 1) {
      // console.log("2s之内只能点击1次");
      return;
    }
    // 我点击了 改变  state.disTrue 的值为 1 
    state.disTrue = 1
    // 判断 是登录按钮吗?
    if(event.innerText == '登   录'){
     // 绑定 click 事件的元素的元素添加 class  最重要是的 is-disabled 禁用
      event.className = "el-button denglu el-button--primary is-disabled";
    }
   // 在 state 定义 一个定时器 
    state.timer = setTimeout(() => {
      // console.log("走到这儿才能执行接口调用");
      // 判断 是登录按钮吗?
      if(event.innerText == '登   录'){
      // 绑定 click 事件的元素的元素添加 class  最重要是的 is-disabled 禁用处理给干掉
        event.className = "el-button el-button--primary denglu";
      }
      // 两秒之后就把 state.disTrue 再改回去 
      state.disTrue = 0
    }, 2000);
  }
}

4. 还有一步

得在 vueX 的 state 定义两个变量

state = {
	// 用来判断要不要 disabled 
	disTrue: 0,
	// 定义一个定时器
  	timer: null,
}

5. 大佬直接可以看这里

//  template  部分

<el-button type="primary" @click="submitForm('Form',$event)"
                         class="denglu" >登录</el-button>
  
  // script 部分
  
  async submitForm(Form,event) {
      console.log(event.currentTarget);
      this.$nextTick(()=>{
        this.$store.commit('disChang' ,event.currentTarget)
      })
      // console.log(this.$store.state.disTrue);
      if(this.$store.state.disTrue ==1){
        return
      }
      // 接口
}

// vueX 的 mutations 部分 

  disChang(state ,event ) {
    // console.log(event.innerText);
    if (state.disTrue == 1) {
      // console.log("1s之内只能点击1次");
      return;
    }
    state.disTrue = 1
    if(event.innerText == '登   录'){
      event.className = "el-button denglu el-button--primary is-disabled";
    }
    if(event.innerText == '下一步'){
      event.className = "el-button el-button--primary is-disabled";
    }
    // console.log(event.$off ('click'));
    state.timer = setTimeout(() => {
      // console.log("每次都会触发的事情");
      // 绑定 click 事件的元素的元素添加 class  最重要是的 is-disabled 禁用处理干掉
      if(event.innerText == '登   录'){
        event.className = "el-button el-button--primary denglu";
      }
      if(event.innerText == '下一步'){
        event.className = "el-button bottonMargin button4 el-button--default";
      }
      // 把 if 判断的条件改为两秒之后
      state.disTrue = 0
    }, 2000);
  }

// vueX 的 state 部分

state = {
	// 用来判断要不要 disabled 
	disTrue: 0,
	// 定义一个定时器
  	timer: null,
}