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

相关推荐
Luna-player9 分钟前
Webpack vs Vite
前端·vue.js·webpack
我是初九9 分钟前
【遇见狂神说|前端】HTML5
前端·html
Cg1362691597413 分钟前
js引入方式
前端·javascript·ajax
J超会运17 分钟前
从零部署Nginx:Web全栈实战指南
运维·前端·nginx
-SOLO-24 分钟前
chrome插件 将网页转化为markdown
前端·chrome
酉鬼女又兒29 分钟前
零基础入门Web应用开发(备赛蓝桥杯)_网页布局原理
前端·职场和发展·蓝桥杯·html5
zzh0811 小时前
web技术与nginx网站环境部署
运维·前端·nginx
3Katrina1 小时前
RAG技术全拆解:让大模型告别“瞎编”,秒变靠谱助手
前端
a1117761 小时前
堆叠式流程图编辑器(html 开源)
开发语言·前端·javascript·开源·编辑器·html·流程图
墨渊君1 小时前
前端工程化进阶:Monorepos 架构简析(水文)
前端