現(xiàn)在有個(gè)場景，需要轉(zhuǎn)賬盗冷。當(dāng)點(diǎn)擊按鈕提交的時(shí)候怠苔，調(diào)用后端接口實(shí)現(xiàn)轉(zhuǎn)賬，有時(shí)候會出現(xiàn)誤點(diǎn)擊仪糖，用戶連續(xù)點(diǎn)擊N次按鈕柑司，那么就會發(fā)生N比轉(zhuǎn)賬。
對于以上場景锅劝，解決方法之一就是：在一筆轉(zhuǎn)賬請求返回響應(yīng)結(jié)果之前disable按鈕攒驰，使得后續(xù)點(diǎn)擊失效，angular對此提供了一個(gè)插件ng-auto-disable故爵，在寫Vue代碼的時(shí)候玻粪，對應(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í)候，會計(jì)算binding.value的值线定，handleClick(param1, param2, ..., paramn)就會在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的思想是：獲取對應(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
