vue3自定义指令防止表单重复提交

可以设置在某个事件段内不允许重复提交；或者点击提交后设置提交flag，flag为true则不能再次提交 

<template>
  <div>
    <h1>防止表单重复提交</h1>
    <button @click="submitForm" v-throttle>提交</button>
  </div>
</template>
<script lang="ts">
export default {
  setup(props: any, ctx: any) {
    console.log(props, ctx);

    const submitForm = () => {
      console.log("提交表单");
    };

    return {
      submitForm
    };
  },
  directives: {
    throttle: {
        // 需要使用created事件钩子
      created: (el: any, binding: any) => {
        let throttleTime = binding.value; // 节流时间
        if (!throttleTime) {
          // 用户若不设置节流时间，则默认2s
          throttleTime = 2000;
        }
        let cbFun: any;
        el.addEventListener(
          "click",
          (event: any) => {
            if (!cbFun) {
              // 第一次执行
              cbFun = setTimeout(() => {
                cbFun = null;
              }, throttleTime);
            } else {
              event && event.stopImmediatePropagation();
            }
          },
          true
        );
      }
    }
  }
};
</script>