Created
December 13, 2019 09:24
-
-
Save Muscipular/8732a5619f4bf09d5000579922f29071 to your computer and use it in GitHub Desktop.
antd vue input debounce
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function hasProp(instance, prop) { | |
let $options = instance.$options || {} | |
let propsData = $options.propsData || {} | |
return prop in propsData | |
} | |
function fx(self, binding, preCheck, action) { | |
return function(...e) { | |
let data = preCheck.call(this, ...e) | |
if (!data) return | |
let delay = ~~binding.value || 50 | |
let { value } = data | |
this.___value = value | |
let firstChange = this.__firstChange | |
if (firstChange != this.__changeTimeout) { | |
clearTimeout(this.__changeTimeout) | |
} | |
let t = this.__changeTimeout = setTimeout(() => { | |
this.__firstChange = void 0 | |
action.call(this, data, ...e) | |
if (this.__changeTimeout === t) { | |
this.___value = void 0 | |
} | |
}, delay) | |
if (!firstChange) { | |
this.__firstChange = this.__changeTimeout | |
} | |
}.bind(self) | |
} | |
let ValueChecker = function(e) { | |
const { value, composing } = e.target | |
if (composing || this.stateValue === value) return | |
return { value } | |
} | |
let Noop = function(el, binding, vnode, oldVnode) { | |
} | |
export default { | |
/** | |
* | |
* @param el | |
* @param binding | |
* @param vnode {VNode} | |
* @param oldVnode {VNode} | |
*/ | |
bind: function(el, binding, vnode, oldVnode) { | |
let handleChange = vnode.componentInstance.handleChange | |
if (handleChange) { | |
vnode.componentInstance.handleChange = fx(vnode.componentInstance, binding, ValueChecker, function(data, e) { | |
this.setValue(this.___value, e) | |
}) | |
} | |
let handleTextareaChange = vnode.componentInstance.handleTextareaChange | |
if (handleTextareaChange) { | |
vnode.componentInstance.handleTextareaChange = fx(vnode.componentInstance, binding, ValueChecker, function(data, e) { | |
let value = this.___value | |
if (!hasProp(this, 'value')) { | |
this.stateValue = value | |
this.resizeTextarea() | |
} else { | |
this.$forceUpdate() | |
} | |
this.$emit('change.value', value) | |
this.$emit('change', e) | |
this.$emit('input', e) | |
}) | |
} | |
}, | |
inserted: Noop, | |
update: Noop, | |
componentUpdated: Noop, | |
unbind: Noop | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment