1. 程式人生 > >關於vue表單提交防雙/多擊

關於vue表單提交防雙/多擊

先說下出現場景:
測試這次比較極端(也有可能是測試又學會什麼新知識了,哈哈),說是在點選提交和呼叫之間有可能有狂暴的使用者在多連擊,就像打遊戲一樣,呼叫介面後的loading狀態切換就無效了
然後,就只好自己寫了個基於vue防多擊的指令,小小偷懶了下,我裡面已經注入fastClick了,因此響應方法是極快的,因此只需要稍微控制下二次點選的時間即可

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>