現(xiàn)在有個(gè)場(chǎng)景，需要轉(zhuǎn)賬。當(dāng)點(diǎn)擊按鈕提交的時(shí)候，調(diào)用后端接口實(shí)現(xiàn)轉(zhuǎn)賬，有時(shí)候會(huì)出現(xiàn)誤點(diǎn)擊，用戶連續(xù)點(diǎn)擊N次按鈕，那么就會(huì)發(fā)生N比轉(zhuǎn)賬。
對(duì)于以上場(chǎng)景，解決方法之一就是：在一筆轉(zhuǎn)賬請(qǐng)求返回響應(yīng)結(jié)果之前disable按鈕，使得后續(xù)點(diǎn)擊失效，angular對(duì)此提供了一個(gè)插件ng-auto-disable，在寫Vue代碼的時(shí)候，對(duì)應(yīng)寫了一個(gè)基于Vue的auto-disable
注意：此處，統(tǒng)一給disable的元素添加了一個(gè)class為is-disabled樣式

import Vue from 'vue'
const EVENT = {
  click: 'click',
  submit: 'submit'
}

/**
 * <button
 *   v-auto-disable="confirm"
 *   @click="confirm">
 *   confirm
 * </button>
 *
 * inform:
 *   confirm() must return a Promise
 *   not only support button, but also for any html labels
 *
 */

const toggleDisable = el => {
  if (el.getAttribute('disabled')) {
    el.removeAttribute('disabled')
    el.classList.remove('is-disabled')
  } else {
    el.setAttribute('disabled', 'disabled')
    el.classList.add('is-disabled')
  }
}

function disableButton (el, flag = true) {
  el.__scheduled = flag
  toggleDisable(el)
  console.log('begin ' + (flag ? 'disable' : 'enable'))
}

function checkBindingValue (val) {
  if (val instanceof Array) {
    let fn = val[0]
    let args = val[1]
    if (!(fn instanceof Function)) {
      console.error('the first element of the array must be a function handle the event')
      return ''
    }
    if (!(args instanceof Array)) {
      console.error('the second element is an array, it is the params of the event handler')
      return ''
    }
    return {
      fn,
      args
    }
  } else if (val instanceof Function) {
    return {
      fn: val,
      args: ''
    }
  }
  console.error('autoDisable must accept a Array or an Function, like v-auto-disable.click="[handleClick, [param1, param2, ..., paramn]]" or v-auto-disable.click="handleClick"')
  return null
}
/**
 * v-auto-disable Accept an Array or a Function
 * when accept an array，the first element is the funtion name of the v-auto-disable event handler and the second element is arguments of the Function
 *    v-auto-disable.click="[handleClick, [param1, param2, ..., paramn]]"
 * when accept a function, it the the v-auto-disable event handler
 *    v-auto-disable.click="handleClick"
 */
Vue.directive('autoDisable', {
  bind (el, binding, vnode) {
    // let fn = binding.value
    let fnObj = checkBindingValue(binding.value)
    if (!fnObj) {
      return
    }
    let { fn, args } = fnObj
    el.__eName = binding.modifiers.submit ? EVENT.submit : (binding.modifiers.click ? EVENT.click : '')
    // let v_listener = vnode.data.on || (vnode.componentInstance && vnode.componentInstance.$listeners)
    // console.log(v_listener)
    if (!el.__eName) {
      console.error('please define the event modified by auto-disable')
    }
    el.__listener = async function () {
      let cb = fn(...args)
      if (!isPromise(cb)) {
        console.error(cb, binding, 'autoDisable must accept a valid Function which return a Promise!')
        return
      }
      if (el.__scheduled) {
        return
      }
      try {
        disableButton(el)
        cb
          .catch(e => {
            throw e
          })
          .finally(() => disableButton(el, false))
      } catch (e) {
        console.error(e.message)
      }
    }
    el.addEventListener(el.__eName, el.__listener, true)
  },
  unbind (el, binding, vnode) {
    el.removeEventListener(el.__eName, el.__listener, true)
  }
})

function isPromise (promise) {
  return promise && (promise.then instanceof Function)
}

此處，可以傳入一個(gè)函數(shù)或者數(shù)組
傳入數(shù)組：v-auto-disable.click="[handler, [param1, param2, ..., paramn]]"，第一個(gè)參數(shù)是處理函數(shù)handler，第二個(gè)函數(shù)是handler的參數(shù)。
傳入一個(gè)函數(shù)名v-auto-disable.click="handler"
.click是修飾詞，表示在click事件時(shí)觸發(fā)handler。也可以是v-auto-disable.submit

開始的時(shí)候，v-auto-disable.click="[handleClick, [param1, param2, ..., paramn]]"是想寫成v-auto-disable.click="handleClick(param1, param2, ..., paramn)"的形式，在directive綁定至組件上時(shí)候，會(huì)計(jì)算binding.value的值，handleClick(param1, param2, ..., paramn)就會(huì)在directive綁定的時(shí)候而不是發(fā)生相應(yīng)事件的時(shí)候觸發(fā)執(zhí)行。

一些思考，也是本人最初的想法模仿ng-autodisable的方式來構(gòu)造v-auto-disable，也就是如@click="handleClick(param1, param2, ..., paramn)" v-auto-disable.click=""。首先說一下ng-autodisable的思想是：獲取對(duì)應(yīng)事件的handlers --> 使用unbind方法移除監(jiān)聽事件 --> 添加監(jiān)聽事件，監(jiān)聽事件的回調(diào)函數(shù)首先disable按鈕之類的元素，再調(diào)用handlers（handlers要求返回promise），在promise被resolve之后，重新enable按鈕之類的元素。Vue避免直接操作DOM元素，沒有提供unbind之類的方法，所以最后放棄了，也沒繼續(xù)深入研究，有想法的朋友，也歡迎提供更好的解決方案。代碼中注釋掉的v_listener可以獲取到綁定在元素上的事件，比如let clickEvent = v_listener.click