关于如何防止提交暴击

一、背景

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

二、解决方案

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

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

// 防止提交暴击 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)     })   } })