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-reclickapp.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>