私人装修接单网站,重庆制作企业网站,网站制作方案设计,喜欢做木工 网站本文列两种方式#xff0c;推荐第一种#xff0c;经过长时间测试第二种防止的还是会漏#xff0c;这里也列一下
①使用定时器#xff08;推荐#xff09;
判断3秒钟之内方法只能执行一次
el-button clickhandleClick typeprimary :loading…本文列两种方式推荐第一种经过长时间测试第二种防止的还是会漏这里也列一下
①使用定时器推荐
判断3秒钟之内方法只能执行一次
el-button clickhandleClick typeprimary :loadingformLoading确 定/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 clickhandleClick typeprimary v-prevent-reclick2000确 定/el-button
