Vue3中防止按钮重复点击的方式

本文列两种方式，推荐第一种，经过长时间测试第二种防止的还是会漏，这里也列一下

①使用定时器（推荐）

判断3秒钟之内方法只能执行一次

<el-button @click="handleClick" type="primary" :loading="formLoading">确 定</el-button>

// 定义按钮禁用变量，这里禁用了如果点的快还是能点两次，所以下面再定义一个定时器
const formLoading = ref(false)

// 定时器防止重复执行
const handleClick = () => {
  if (!isCooldown.value) {
    // 设置为冷却状态
    isCooldown.value = true; 
	// 执行业务逻辑
    submitForm(); 
    // 设置定时器，3秒后解除冷却状态
    setTimeout(() => {
      isCooldown.value = false;
    }, 3000);
  } else {
    message.warning('点太快啦')
  }
};

// 业务逻辑函数，提交、保存、修改等等
const submitForm = async () => {
	formLoading.value = true
	// ......各种自己的业务逻辑
	formLoading.value = false
}

②Vue3自定义指令

很多帖子都写的这种方式，我试着会漏，并且偶尔会导致其他按钮不可用，还是第一种方式简单粗暴可靠

main.ts

  const app = createApp(App)

  // 注册自定义指令 v-prevent-reclick
  app.directive('prevent-reclick', {
    beforeMount(el, binding) {
      el.disabled = false; // 初始化时启用按钮
      el.addEventListener('click', () => {
        el.disabled = true; // 点击后禁用按钮
        setTimeout(() => {
          el.disabled = false; // 在指定的时间后重新启用按钮
        }, binding.value || 2000); // 使用 binding.value 来设置等待时间，默认为 2000 毫秒
      });
    },
    unmounted(el) {
      // 组件卸载时移除事件监听器
      el.removeEventListener('click');
    },
  });

.vue文件

<el-button @click="handleClick" type="primary" v-prevent-reclick="2000">确 定</el-button>