现在有个场景，需要转账。当点击按钮提交的时候，调用后端接口实现转账，有时候会出现误点击，用户连续点击N次按钮，那么就会发生N比转账。
对于以上场景，解决方法之一就是：在一笔转账请求返回响应结果之前disable按钮，使得后续点击失效，angular对此提供了一个插件ng-auto-disable，在写Vue代码的时候，对应写了一个基于Vue的auto-disable
注意：此处，统一给disable的元素添加了一个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)
}
此处，可以传入一个函数或者数组
传入数组：v-auto-disable.click="[handler, [param1, param2, ..., paramn]]"，第一个参数是处理函数handler，第二个函数是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按钮之类的元素，再调用handlers（handlers要求返回promise），在promise被resolve之后，重新enable按钮之类的元素。Vue避免直接操作DOM元素，没有提供unbind之类的方法，所以最后放弃了，也没继续深入研究，有想法的朋友，也欢迎提供更好的解决方案。代码中注释掉的v_listener可以获取到绑定在元素上的事件，比如let clickEvent = v_listener.click
