vue 提交表单重复点击,重复提交防抖问题

问题 :用户点击保存时,可能会多次点击。导致生成重复数据。

目标:多次点击时,1s内只允许提交一次数据。

解决方案

1.在utils文件夹创建文件preventReClick.js

复制代码
export default {
    install (Vue) {
      // 防止按钮重复点击
      Vue.directive('preventReClick', {
        inserted (el, binding) {
          // console.log("binding-7", binding)
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true
              setTimeout(() => {
                el.disabled = false
              }, binding.value || 2000)
            }
          })
        }
      })
    }
  }

2.在main.js中引入

3、在.vue 文件中使用

相关推荐
光影少年4 分钟前
组件复用:HOC、Render Props、自定义Hook 对比
前端·react.js·掘金·金石计划
Gauss松鼠会8 分钟前
【GaussDB】GaussDB SMP特性调优详解
java·服务器·前端·数据库·sql·算法·gaussdb
葬送的代码人生13 分钟前
JavaScript 数组完全指南:从入门到实战
前端·javascript·算法
用户9385156350715 分钟前
深入理解 JavaScript 同步与异步:从单线程到事件循环与 Promise
前端·javascript
搬砖的码农15 分钟前
造一个 Agent 运行时 #01:我决定开干,顺便把坑都写下来
前端·agent·ai编程
yingyima18 分钟前
深入解析:定时任务失败重试机制的底层原理与实践
前端
哈撒Ki18 分钟前
快速入门vue3与常见面试题
前端·vue.js·面试
踩着两条虫23 分钟前
VTJ.PRO v2.4.2 私有化部署与升级实操指南
前端·人工智能·低代码·架构·数据挖掘
木斯佳28 分钟前
前端八股文面经大全:美团前端暑期实习一面(2026-06-08)·面经深度解析
前端
Uso_Magic36 分钟前
VOL_实现APP多文件上传_前端多文件显示!
前端