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 文件中使用

相关推荐
qq_333120971 分钟前
头歌答案--爬虫实战
java·前端·爬虫
Jinuss3 分钟前
源码分析之React中的组件缓存React.memo
前端·react.js
斯班奇的好朋友阿法法9 分钟前
ollama离线导入大模型
服务器·前端·javascript
misty youth15 分钟前
pnpm build,发生了什么
前端·electron·pnpm·build
1024小神15 分钟前
kotlin安卓项目配置webview开启定位功能
前端
kyriewen23 分钟前
MutationObserver:DOM界的“卧底”,暗中观察每个风吹草动
前端·javascript·面试
踩着两条虫29 分钟前
VTJ.PRO 在线应用开发平台的开发者工具与代码质量
前端·vue.js·ai编程
TON_G-T37 分钟前
100行实现Mini React
前端·javascript·react.js
恋猫de小郭37 分钟前
2026 AI 时代下,Flutter 和 Dart 的机遇和未来发展,AI 一体化
android·前端·flutter
看客随心1 小时前
vue + elementPlus大屏项目使用autofit做适配及注意点
前端·javascript·vue.js