Vue.js 学习总结（19）—— Vue3 按钮防重复点击三种方案总结

前言

我们在使用 uniapp 开发完移动端项目之后，需要对程序的性能进行优化：比如防止按钮或者 view 重复点击等。下面是我给出的3种解决方案：

方案一：状态锁

核心：通过设置变量 true/false 来控制按钮或者 view 的状态。

这种方式应该最常见。

<template> <view> <!-- 作者：知否技术 --> <!--1. 视图 --> <view :class="{ 'disabled': isLoading }" @click="handleSubmit"> 提交 </view> <!--2. 按钮 disabled --> <uv-button :disabled="isLoading" @click="handleSubmit"> 提交 </uv-button> <!--3. 按钮 loading --> <uv-button :loading="isLoading" @click="handleSubmit">提交</uv-button> </view> </template> <script setup> import {ref} from 'vue' import orderApi from '@/api/order/order.js'; const isLoading = ref(false) // 提交方法 const handleSubmit = async () => { // 防止重复点击 if (isLoading.value) return // 锁住 isLoading.value = true try { const res = await orderApi.handleSubmit(order); if (res.code === 200) { getReturnFundList(); uni.showToast({ title: '提交成功' }); } else { uni.showToast({ title: '提交失败' }); } } catch (error) { console.error("提交失败:", error); } finally { // 解锁 isLoading.value = false; } } </script>

方案二：全局自定义防重复点击指令

在项目根目录中新建 /directives/preventClick.js :

1. preventClick.js

// 防止重复点击指令 exportconst preventClick = { // 指令绑定到元素时执行 mounted(el, binding) { // 1. 设置防抖间隔时间，默认1000毫秒 const delay = binding.value || 1000; // 2. 创建一个标记，记录当前是否可点击 el.isDisabledClick = false; // 3. 保存原始的点击事件处理函数 const originalClickHandler = el.__originalClickHandler; // 4. 创建新的点击事件处理函数 el.__preventClickHandler = (event) => { // 如果当前不可点击，直接拦截点击事件 if (el.isDisabledClick) { event.preventDefault(); // 阻止默认行为 event.stopPropagation(); // 阻止事件冒泡 return; } // 设置为不可点击状态 el.isDisabledClick = true; // 5. 执行原始的点击事件处理函数 if (originalClickHandler) { originalClickHandler(event); } // 6. 设置定时器，在指定时间后恢复点击 el.preventClickTimer = setTimeout(() => { // 恢复点击状态 el.isDisabledClick = false; // 清除定时器引用 el.preventClickTimer = null; }, delay); }; // 7. 移除原始的点击事件，添加新的点击事件 el.removeEventListener('click', originalClickHandler); el.addEventListener('click', el.__preventClickHandler); }, // 指令从元素解绑时执行 unmounted(el) { // 8. 清除定时器 if (el.preventClickTimer) { clearTimeout(el.preventClickTimer); el.preventClickTimer = null; } // 9. 移除事件监听器 if (el.__preventClickHandler) { el.removeEventListener('click', el.__preventClickHandler); el.__preventClickHandler = null; } // 10. 清除自定义属性 el.isDisabledClick = null; el.__originalClickHandler = null; } };

2. 在 main.js 中全局注册指令

import { createSSRApp } from'vue'; import App from'./App.vue'; // 导入指令 import { preventClick } from'@/directives/preventClick'; exportfunction createApp() { const app = createSSRApp(App); // 全局注册指令，指令名为 prevent-click app.directive('prevent-click', preventClick); return { app }; }

3.在组件中使用指令

<template> <view> <!-- 方式1：使用默认 1000ms 防抖 --> <button v-prevent-click @click="handleClick">点击</button> <!-- 方式2：自定义防抖时间 --> <button v-prevent-click="2000" @click="handleClick">点击</button> </view> </template>

方案三：封装一个防重复点击的 Hook

在项目目录 hooks 新建文件: usePreventReclick.js

import { ref } from'vue' exportfunction usePreventReclick(delay = 1000) { const isDisabled = ref(false) // 执行受保护的操作 fn - 要执行的函数（建议返回 Promise） // 返回 fn 的结果或 undefined（如果被阻止） const execute = async (fn) => { if (isDisabled.value) { console.info('操作被阻止') returnundefined } // 设置为 true isDisabled.value = true try { const result = await fn() return result } catch (error) { // 抛出异常 throw error } finally { // 延迟后自动重置状态 setTimeout(() => { isDisabled.value = false }, delay) } } // 解除禁用 const reset = () => { isDisabled.value = false } return { isDisabled, execute, reset } }

在项目中使用：

<template> <view class="container"> <button :disabled="isLoading" :loading="isLoading" @click="handleSubmit" > {{ isLoading ? '正在提交中...' : '提交订单' }} </button> </view> </template> <script setup> import { ref } from 'vue' import { usePreventReclick } from '@/hooks/usePreventReclick' const isLoading = ref(false) // 创建防重实例：时间 1500 毫秒 const { isDisabled: isLoading, execute } = usePreventReclick(1500) const handleSubmit = () => { execute(async () => { // 模拟后端请求 await new Promise() uni.showToast({ title: '提交成功'}) }).catch(err => { console.error('提交失败:', err) uni.showToast({ title: '提交失败'}) }) } </script>