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

相关推荐
爱敲代码的小鱼5 分钟前
Vue的简介:
前端·javascript·vue.js
H_ZMY20 分钟前
前端瀑布流布局:从基础实现到高性能优化全解析
前端·性能优化
星夜落月23 分钟前
从零部署Wallos:打造专属预算管理平台
服务器·前端·网络·建站
qq_124987075327 分钟前
基于html的书城阅读器系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·spring boot·后端·mysql·信息可视化·html
一个懒人懒人1 小时前
mysql2连接池配置与优化
前端·mysql
PorkCanteen1 小时前
Cursor使用-从问题到解决方案(以及一些通用rules)
前端·ai·ai编程
小马_xiaoen1 小时前
Promise 从入门到精通:彻底解决前端异步回调问题!!!
前端·javascript
jingling5551 小时前
uniapp | 基于高德地图实现位置选择功能(安卓端)
android·前端·javascript·uni-app
某公司摸鱼前端1 小时前
前端一键部署网站至服务器FTP
前端·javascript·uni-app