关于如何防止提交暴击

一、背景

　　当提交表单时，如果不防止按钮提交暴击，持续点击的情况下会反复请求接口导致页面卡死，影响性能。

二、解决方案

在入口文件中添加noMoreClick指令，当按钮需要防暴击时加上v-noMoreClick即可，如下所示

 

 

// 防止提交暴击
Vue.directive('noMoreClick', {
  inserted (el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-loading')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-loading')
      }, 2500)
    })
  }
})