【Vue】自定义防止重复提交指令

最新推荐文章于 2024-10-09 14:20:15 发布

原创最新推荐文章于 2024-10-09 14:20:15 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

VUE系列专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种在Vue项目中防止表单按钮重复提交的有效解决方案。通过自定义一个名为v-preventReClick的指令，可以轻松地控制按钮在一定时间内不可重复点击，有效避免了因重复提交造成的数据混乱或用户体验下降。该指令允许开发者设定延迟时间，提供了一个简洁且可配置的防重复提交机制。

前端开发中防重复提交是一个很头疼又绕不开的话题。
现在我们定义一个指令v-preventReClick让它专门来干这件事。

talk is cheap, show me the code.

v-preventReClick

src/directive/preventReClick.js

/**
 * 防止重复提交指令
 * 参考文档 https://juejin.im/post/5eb7fc626fb9a0436a7c6af1#heading-0
 *
 * @author: tanpeng
 * @date : 2020/5/20 18:08
 * @version: v1.0.0
 */
const preventReClick = {
  install: (Vue, options) => {
    Vue.directive('preventReClick', {
      inserted: (el, binding) => {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            // 传入绑定值就使用，默认3000毫秒内不可重复点击
            setTimeout(() => el.disabled = false, binding.value || 3000)
          }
        })
      }
    })
  }
}

export default preventReClick

usage

src/main.js

import preventReClick from '@/directive/preventReClick'
// 显示声明为全局指令，代码可读性更好
Vue.use(preventReClick)

src/Demo.vue

// 指定延迟时间1000ms
<a-button  size="large" type="primary" v-preventReClick="1000">保 存</a-button>

// 默认延迟时间3000ms
<a-button  size="large" type="primary" v-preventReClick>保 存</a-button>