vue指令-约束用户在短时间内重复请求

有时候用户在操作页面时，比如点击一次按钮请求较慢，loading一直显示在加载，那么，用户有可能不耐烦，可能会不断的点击按钮，这样就会不断的请求后端接口，不断地消耗网络流量，增加http请求次数,导致网页性能问题,那么我可以通过以下方式来限制或者约束这种操作。

// 1.新建avoidRepeatClick.js代码如下：全局注册指令
export default {
  install (Vue) {
    // 防止重复点击
    Vue.directive('avoidRepeatClick', {
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!el.disabled) {
            el.disabled = true
            setTimeout(() => {
              el.disabled = false
            },
            binding.value || 1000)
          }
        })
      }
    })
  }
}
// 2. 在main.js入口文件import次模块
impot avoidrepateclick from '@/utils/avoidRepeatClick'
Vue.use(avoidrepeatclick)

// 3. 在具体的vue文件使用此指令,这样按钮被第一次点击之后5s内是禁用状态，不能再次点击，5s后恢复
<el-button @click='queryUserInfo' v-avoidrepeatclick='5000'>查询</el-button>

可参考此篇博客，感觉写得很有条理。
https://www.jianshu.com/p/fa283869df95