import { VantComponent } from '../common/component'; import { isDef } from '../common/validator'; const LONG_PRESS_START_TIME = 600; const LONG_PRESS_INTERVAL = 200; // add num and avoid float number function add(num1, num2) { const cardinal = Math.pow(10, 10); return Math.round((num1 + num2) * cardinal) / cardinal; } function equal(value1, value2) { return String(value1) === String(value2); } VantComponent({ field: true, classes: ['input-class', 'plus-class', 'minus-class'], props: { value: { type: null, observer: 'observeValue', }, integer: { type: Boolean, observer: 'check', }, disabled: Boolean, inputWidth: String, buttonSize: String, asyncChange: Boolean, disableInput: Boolean, decimalLength: { type: Number, value: null, observer: 'check', }, min: { type: null, value: 1, observer: 'check', }, max: { type: null, value: Number.MAX_SAFE_INTEGER, observer: 'check', }, step: { type: null, value: 1, }, showPlus: { type: Boolean, value: true, }, showMinus: { type: Boolean, value: true, }, disablePlus: Boolean, disableMinus: Boolean, longPress: { type: Boolean, value: true, }, theme: String, }, data: { currentValue: '', }, created() { this.setData({ currentValue: this.format(this.data.value), }); }, methods: { observeValue() { const { value, currentValue } = this.data; if (!equal(value, currentValue)) { this.setData({ currentValue: this.format(value) }); } }, check() { const val = this.format(this.data.currentValue); if (!equal(val, this.data.currentValue)) { this.setData({ currentValue: val }); } }, isDisabled(type) { const { disabled, disablePlus, disableMinus, currentValue, max, min, } = this.data; if (type === 'plus') { return disabled || disablePlus || currentValue >= max; } return disabled || disableMinus || currentValue <= min; }, onFocus(event) { this.$emit('focus', event.detail); }, onBlur(event) { const value = this.format(event.detail.value); this.emitChange(value); this.$emit('blur', Object.assign(Object.assign({}, event.detail), { value })); }, // filter illegal characters filter(value) { value = String(value).replace(/[^0-9.-]/g, ''); if (this.data.integer && value.indexOf('.') !== -1) { value = value.split('.')[0]; } return value; }, // limit value range format(value) { value = this.filter(value); // format range value = value === '' ? 0 : +value; value = Math.max(Math.min(this.data.max, value), this.data.min); // format decimal if (isDef(this.data.decimalLength)) { value = value.toFixed(this.data.decimalLength); } return value; }, onInput(event) { const { value = '' } = event.detail || {}; // allow input to be empty if (value === '') { return; } let formatted = this.filter(value); // limit max decimal length if (isDef(this.data.decimalLength) && formatted.indexOf('.') !== -1) { const pair = formatted.split('.'); formatted = `${pair[0]}.${pair[1].slice(0, this.data.decimalLength)}`; } this.emitChange(formatted); }, emitChange(value) { if (!this.data.asyncChange) { this.setData({ currentValue: value }); } this.$emit('change', value); }, onChange() { const { type } = this; if (this.isDisabled(type)) { this.$emit('overlimit', type); return; } const diff = type === 'minus' ? -this.data.step : +this.data.step; const value = this.format(add(+this.data.currentValue, diff)); this.emitChange(value); this.$emit(type); }, longPressStep() { this.longPressTimer = setTimeout(() => { this.onChange(); this.longPressStep(); }, LONG_PRESS_INTERVAL); }, onTap(event) { const { type } = event.currentTarget.dataset; this.type = type; this.onChange(); }, onTouchStart(event) { if (!this.data.longPress) { return; } clearTimeout(this.longPressTimer); const { type } = event.currentTarget.dataset; this.type = type; this.isLongPress = false; this.longPressTimer = setTimeout(() => { this.isLongPress = true; this.onChange(); this.longPressStep(); }, LONG_PRESS_START_TIME); }, onTouchEnd() { if (!this.data.longPress) { return; } clearTimeout(this.longPressTimer); }, }, });