Vue工程化封装实践[表单按钮重复提交，axios重复请求的处理方案]

1.自定义指令directive

思路： 点击之后当前按钮一定时间内（例如：setTimeout 1000ms）不可以再次被点击，相当于节流；

但是如果一个请求1000ms以上还没有返回，那么再次点击就会触发新的请求了。

添加自定义文件 directives.js

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
  inserted: function(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3000) // 传入绑定值就使用，默认3000毫秒内不可重复触发
      }
    })
  }
})

export { preventReClick }

在main.js中引用

import preventReClick from './plugins/directives.js' //防多次点击，重复提交