当前位置: 首页 > news >正文

Vue3 + Element Plus 防止按钮重复点击的解决方案

在 Vue3 和 Element Plus 项目中,防止按钮重复点击是一个常见的需求,特别是在表单提交、支付等场景下。以下是几种实现方式:

1. 使用 Element Plus 的 loading 状态

Element Plus 的按钮组件本身就支持 loading 状态,这是最简单的方式:

vue

复制

下载

<template><el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
</template><script setup>
import { ref } from 'vue';const loading = ref(false);const handleSubmit = async () => {loading.value = true;try {// 执行异步操作await submitForm();} finally {loading.value = false;}
};
</script>

2. 自定义指令实现防重复点击

可以创建一个全局指令来实现防重复点击:

javascript

复制

下载

// directives.js
import { Directive } from 'vue';export const preventReClick: Directive = {mounted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = true;setTimeout(() => {el.disabled = false;}, binding.value || 2000);}});}
};// main.js
import { preventReClick } from './directives';
app.directive('prevent-reclick', preventReClick);

使用方式:

vue

复制

下载

<el-button v-prevent-reclick="1000" @click="handleClick">提交</el-button>

3. 使用装饰器(适用于组合式 API)

可以创建一个可组合函数来防止重复点击:

javascript

复制

下载

// composables/usePreventReClick.js
import { ref } from 'vue';export function usePreventReClick() {const isClicking = ref(false);const preventReClick = async (fn) => {if (isClicking.value) return;isClicking.value = true;try {await fn();} finally {isClicking.value = false;}};return {isClicking,preventReClick};
}

ts,usePreventReClick.ts

import { ref } from "vue";type AsyncFunction = () => Promise<void>;/*** 防止重复点击 hook* @returns*/
export function usePreventReClick() {const isClicking = ref(false);const preventReClick = async (fn: AsyncFunction) => {if (isClicking.value) {return;}isClicking.value = true;try {await fn();} finally {isClicking.value = false;}};return {isClicking,preventReClick};
}

使用方式:

vue

复制

下载

<script setup>
import { usePreventReClick } from './composables/usePreventReClick';const { isClicking, preventReClick } = usePreventReClick();const handleSubmit = () => {preventReClick(async () => {// 执行提交逻辑await submitForm();});
};
</script><template><el-button :loading="isClicking" @click="handleSubmit">提交</el-button>
</template>

4. 封装高阶组件

如果需要更复杂的控制,可以封装一个高阶组件:

vue

复制

下载

<!-- PreventReClickButton.vue -->
<template><el-button v-bind="$attrs" :loading="loading" @click="handleClick"><slot></slot></el-button>
</template><script setup>
import { ref } from 'vue';const props = defineProps({onClick: {type: Function,required: true},delay: {type: Number,default: 1000}
});const loading = ref(false);const handleClick = async () => {if (loading.value) return;loading.value = true;try {await props.onClick();} finally {setTimeout(() => {loading.value = false;}, props.delay);}
};
</script>

使用方式:

vue

复制

下载

<PreventReClickButton type="primary" :onClick="submitForm"
>提交
</PreventReClickButton>

总结

以上方法各有优缺点,根据项目需求选择:

  1. 简单场景:直接使用 Element Plus 的 loading 状态

  2. 全局控制:使用自定义指令

  3. 组合式 API:使用可组合函数

  4. 复杂组件:封装高阶组件

http://www.dtcms.com/a/225378.html

相关文章:

  • 测量3D翼片的距离与角度
  • PySide6 GUI 学习笔记——常用类及控件使用方法(地址类QUrl)
  • 【Linux网络编程】数据链路层
  • 布隆筛选详解
  • TCP三次握手四次挥手
  • 将手机网络经USB数据线和本地局域网共享给华为AP6050DN无线接入点
  • TDengine 集群容错与灾备
  • 2024 CKA模拟系统制作 | Step-By-Step | 16、题目搭建-sidecar 代理容器日志
  • Go语言中的rune和byte类型详解
  • 【目标检测】检测网络中neck的核心作用
  • GEE:获取研究区的DEM数据
  • 模拟实现线程池(线程数目为定值)和定时器
  • Java数值处理常见错误解析
  • 鸿蒙OSUniApp集成WebAssembly实现高性能计算:从入门到实践#三方框架 #Uniapp
  • C/C++ 面试复习笔记(3)
  • WEBSTORM前端 —— 第3章:移动 Web —— 第3节:移动适配
  • 【前端】html2pdf实现用前端下载pdf
  • 前端面试准备-5
  • 字节面试手撕题:版本号排序
  • MyBatis03——SpringBoot整合MyBatis
  • OpenLayers 地图标注之图文标注
  • C#数字图像处理(二)
  • Ⅰ.计算机二级选择题(C语言概述)
  • 【第16届蓝桥杯 | 软件赛】CB组省赛第二场
  • [蓝桥杯]外卖店优先级
  • 串口通信技术及USART应用研究
  • 鸿蒙仓颉语言开发教程:自定义弹窗
  • 开始通信之旅-----话题通信
  • python 将音乐和人声分离
  • 如何编写GitLab-CI配置文件