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：传参（可以有多个传参）
<el-button @click="onSubmit" v-repeatStop="{func:saveData,delay:'2000',flag:true}">提交</el-button>