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
        >
相关推荐
十月雨眠16 分钟前
使用three.js 实现vr全景图展示,复制即可用
开发语言·javascript
朱小勇本勇1 小时前
Python-Pdf转Markdown
前端·python·pdf
EasyNTS1 小时前
EasyPlayer.js遇到播放RTMP视频时,画面显示异常是什么原因?
开发语言·javascript·音视频
小满zs2 小时前
React第二十章(useMemo)
前端·javascript·react.js
赵大仁2 小时前
Tailwind CSS:现代 CSS 框架的优雅之选
前端·javascript·vue.js·前端框架·css3·html5·scss
如影随从2 小时前
07-ArcGIS For JavaScript--隐藏参数qualitySettings(memory和lod控制)
开发语言·javascript·arcgis·memorylimit·lodfactor
GIS学姐嘉欣2 小时前
25考研希望渺茫,工作 VS 二战,怎么选?
前端·学习·考研·gis
二川bro2 小时前
图片叠加拖拽对比展示效果实现——Vue版
前端·vue.js
russle2 小时前
android app构建时排除指定类
android·前端·chrome
愚愚是个大笨蛋2 小时前
自定义VUE指定,实现鼠标悬停显示提示面板,离开元素或面板后面板消失
前端·javascript·vue.js