v-auto-disable

今、振り替えが必要なシーンがあります.ボタンをクリックして提出すると、バックエンドインタフェースを呼び出して振り替えを実現し、誤点打が発生することがあり、ユーザーがN回連続してボタンをクリックすると、N比振り替えが発生する.以上のシナリオについて、解決策の1つは、振替要求が応答結果を返す前にdisableボタンをクリックして後続のクリックを無効にすることである.angularは、Vueコードを書くときに、Vueベースのauto-disableを書くことに対応するプラグインng-auto-disableを提供する.ここで、disableに統一された要素にclassをis-disabledスタイルに追加する

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

/**
 * 
 *   confirm
 * 
 *
 * 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)
}

ここで、1つの関数または配列の入力配列:v-auto-disable.click="[handler, [param1, param2, ..., paramn]]"を入力することができ、1つ目のパラメータは関数handlerを処理し、2つ目の関数はhandlerのパラメータである.関数名v-auto-disable.click="handler"が入力.clickは修飾語で、clickイベント時にhandlerをトリガーすることを表す.v-auto-disable.submitでもいいです
最初はv-auto-disable.click="[handleClick, [param1, param2, ..., paramn]]"はv-auto-disable.click="handleClick(param1, param2, ..., paramn)"と書きたい形式で、directiveがコンポーネントにバインドされたときにbindingが計算されます.valueの値、handleClick(param1, param2, ..., paramn)は、対応するイベントが発生するのではなくdirectiveバインド時に実行をトリガーします.
いくつかの思考は、私の最初の考えがng-autodisableの方法を真似てv-auto-disable、つまり@click="handleClick(param1, param2, ..., paramn)" v-auto-disable.click=""を構築したのです.まずng-autodisableの考えを述べると、対応するイベントを取得するhandlers-->unbindの方法でリスニングイベントを除去する-->リスニングイベントを追加し、リスニングイベントのコールバック関数はまずdisableボタンなどの要素をdisableし、handlers(handlersはpromiseに戻ることを要求する)を呼び出し、promiseがresolveされた後、再びenableボタンなどの要素をenableする.VueはDOM要素を直接操作することを避け、unbindなどの方法を提供していないので、最後に諦め、深く研究し続けず、考えのある友达も、より良い解決策を提供することを歓迎します.コードに注釈されたv_listenerは、let clickEvent = v_listener.clickのような要素にバインドされたイベントを取得することができる.