vue表單提交防雙/多擊的示例分析

這篇文章主要介紹vue表單提交防雙/多擊的示例分析，文中介紹的非常詳細，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

先說(shuō)下出現場(chǎng)景：

測試這次比較極端(也有可能是測試又學(xué)會(huì )什么新知識了，哈哈)，說(shuō)是在點(diǎn)擊提交和調用之間有可能有狂暴的用戶(hù)在多連擊，就像打游戲一樣，調用接口后的loading狀態(tài)切換就無(wú)效了

然后，就只好自己寫(xiě)了個(gè)基于vue防多擊的指令,小小偷懶了下，我里面已經(jīng)注入fastClick了，因此響應方法是極快的，因此只需要稍微控制下二次點(diǎn)擊的時(shí)間即可

export default {}.install = (Vue, options = {}) => {
 Vue.directive('dbClick', {
 inserted(el, binding) {
  el.addEventListener('click', e => {
  if(!el.disabled) {
   el.disabled = true;
   let timer = setTimeout( () => {
   el.disabled = false;
   },1000)
  }
  })
 }
 })
}

用法：

<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">保存</mt-button></pr-col>