diff --git a/src/stepper/index.js b/src/stepper/index.js index f354cadd9..2aafe0ad8 100644 --- a/src/stepper/index.js +++ b/src/stepper/index.js @@ -2,6 +2,9 @@ import { createNamespace, isDef, suffixPx } from '../utils'; const [createComponent, bem] = createNamespace('stepper'); +const LONG_PRESS_START_TIME = 600; +const LONG_PRESS_INTERVAL = 200; + export default createComponent({ props: { value: null, @@ -78,19 +81,21 @@ export default createComponent({ const { value } = event.target; const formatted = this.format(value); - if (!this.asyncChange) { + if (this.asyncChange) { + event.target.value = this.currentValue; + this.$emit('input', formatted); + this.$emit('change', formatted); + } else { if (+value !== formatted) { event.target.value = formatted; } this.currentValue = formatted; - } else { - event.target.value = this.currentValue; - this.$emit('input', formatted); - this.$emit('change', formatted); } }, - onChange(type) { + onChange() { + const { type } = this; + if (this[`${type}Disabled`]) { this.$emit('overlimit', type); return; @@ -99,12 +104,13 @@ export default createComponent({ const diff = type === 'minus' ? -this.step : +this.step; const value = Math.round((this.currentValue + diff) * 100) / 100; - if (!this.asyncChange) { - this.currentValue = this.range(value); - } else { + if (this.asyncChange) { this.$emit('input', value); this.$emit('change', value); + } else { + this.currentValue = this.range(value); } + this.$emit(type); }, @@ -120,19 +126,56 @@ export default createComponent({ if (this.currentValue === 0) { event.target.value = this.currentValue; } + }, + + longPressStep() { + this.longPressTimer = setTimeout(() => { + this.onChange(this.type); + this.longPressStep(this.type); + }, LONG_PRESS_INTERVAL); + }, + + onTouchStart(type) { + clearTimeout(this.longPressTimer); + this.isLongPress = false; + + this.longPressTimer = setTimeout(() => { + this.isLongPress = true; + this.onChange(); + this.longPressStep(); + }, LONG_PRESS_START_TIME); + }, + + onTouchEnd(event) { + clearTimeout(this.longPressTimer); + + if (this.isLongPress) { + event.preventDefault(); + } } }, render(h) { - const onChange = type => () => { - this.onChange(type); - }; + const createListeners = type => ({ + on: { + click: () => { + this.type = type; + this.onChange(); + }, + touchstart: () => { + this.type = type; + this.onTouchStart(type); + }, + touchend: this.onTouchEnd, + touchcancel: this.onTouchEnd + } + }); return (