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

前端开发中防重复提交这是一个非常头痛和不可避免的话题。 现在我们定义一个指令v-preventReClick让它做这件事。

src/directive/preventReClick.js

/** * 防止重复提交指令 * 参考文档 javascript:void(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

src/main.js

import preventReClick from '@/directive/preventReClick'// 显示声明是全局指令，代码可读性更好.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>

Vue工程包装实践系列(2)[表单按钮重复提交，axios重复请求处理方案]