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

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

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

解决方案

1、创建js文件preventReClick.js

html 复制代码
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中引入

html 复制代码
import Vue from 'vue';
import preventReClick from './preventReClick'
 
Vue.use(preventReClick);

3、在.vue 文件中使用

html 复制代码
<el-button
          type="primary"
          @click="submit()"
          v-preventReClick="1000"
          size="mini"
          >{{ $t("m.确定") }}</el-button
        >
相关推荐
m0_5027249518 小时前
飞书真机调试
开发语言·前端·javascript
我只会写Bug啊19 小时前
复制可用!纯前端基于 Geolocation API 实现经纬度获取与地图可视化
前端·高德地图·地图·百度地图·经纬度
刘一说19 小时前
Vue3 模块语法革命:移除过滤器(Filters)的深度解析与迁移指南
前端·vue.js·js
lkbhua莱克瓦2420 小时前
JavaScript核心语法
开发语言·前端·javascript·笔记·html·ecmascript·javaweb
Trae1ounG20 小时前
这是什么dom
前端·javascript·vue.js
比老马还六20 小时前
Bipes项目二次开发/扩展积木功能(八)
前端·javascript
易营宝20 小时前
全球建站SaaS平台能提升SEO评分吗?是否值得切换?
大数据·前端·人工智能
C_心欲无痕20 小时前
Next.js 的服务端路由:对应api文件夹
开发语言·javascript·ecmascript
5134959220 小时前
在Vue.js项目中使用docx和file-saver实现Word文档导出
前端·vue.js·word
Shirley~~21 小时前
leetcode移除元素
javascript·数据结构·算法