vue防止按钮多次点击进行节流,进行封装自定义指令

1.新建repeatStop.js文件

import Vue from 'vue'
// 阻止按钮重复提交
Vue.directive("repeatStop", {
  bind(el, binding) {
    let timer = null; // 用于存放计时器的变量
    
    el.addEventListener('click', () => {
      if (!timer) {
        console.log(binding)
        binding.value.func(binding.value.flag); // 调用传入的事件处理函数
        
        timer = setTimeout(() => {
          clearTimeout(timer); // 清除计时器
          
          timer = null; // 将计时器设置为null,表示下次点击不再触发
        }, binding.value.delay || 1000); // delay默认值为1000ms
      }
    });
  }
})

2.main.js中引入

import './util/repeatStop.js'

3.组件中使用

func:点击事件,  delay | flag:传参(可以有多个传参)
提交

你可能感兴趣的:(vue防止按钮多次点击进行节流,进行封装自定义指令)