blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Stepper: optimize input strategy (#1534)

Browse Source
This commit is contained in:
neverland 2018-07-24 20:44:07 +08:00 committed by GitHub
parent 3cf84e8016
commit f0e146a212
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/stepper/index.vue
View File

@ -26,7 +26,7 @@ export default create({
name: 'stepper', name: 'stepper',
props: { props: {
value: {}, value: null,
integer: Boolean, integer: Boolean,
disabled: Boolean, disabled: Boolean,
disableInput: Boolean, disableInput: Boolean,
@ -49,10 +49,8 @@ export default create({
}, },
data() { data() {
let value = this.value ? +this.value : +this.defaultValue; const value = this.range(this.value || this.defaultValue);
const correctedValue = this.correctValue(value); if (value !== +this.value) {
if (value !== correctedValue) {
value = correctedValue;
this.$emit('input', value); this.$emit('input', value);
} }
@ -63,74 +61,65 @@ export default create({
computed: { computed: {
minusDisabled() { minusDisabled() {
const min = +this.min; return this.disabled || this.currentValue <= this.min;
const step = +this.step;
const currentValue = +this.currentValue;
return min === currentValue || (currentValue - step) < min || this.disabled;
}, },
plusDisabled() { plusDisabled() {
const max = +this.max; return this.disabled || this.currentValue >= this.max;
const step = +this.step;
const currentValue = +this.currentValue;
return max === currentValue || (currentValue + step) > max || this.disabled;
} }
}, },
watch: { watch: {
value(val) { value(val) {
if (val !== '') {
if (val !== this.currentValue) { if (val !== this.currentValue) {
this.currentValue = val; this.currentValue = this.format(val);
}
} }
},
currentValue(val) {
this.$emit('input', val);
this.$emit('change', val);
} }
}, },
methods: { methods: {
correctValue(value) { // filter illegal characters
if (isNaN(value)) { format(value) {
return this.min; value = String(value).replace(/[^0-9\.-]/g, '');
} return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
},
value = Math.max(this.min, Math.min(this.max, value)); // limit value range
range(value) {
return this.integer ? Math.floor(value) : value; return Math.max(Math.min(this.max, this.format(value)), this.min);
}, },
onInput(event) { onInput(event) {
const { value } = event.target; const { value } = event.target;
this.currentValue = Math.min(this.max, value); const formatted = this.format(value);
event.target.value = this.currentValue;
this.emitInput(); if (+value !== formatted) {
event.target.value = formatted;
}
this.currentValue = formatted;
}, },
onChange(type) { onChange(type) {
if ((this.minusDisabled && type === 'minus') || (this.plusDisabled && type === 'plus')) { if (this[`${type}Disabled`]) {
this.$emit('overlimit', type); this.$emit('overlimit', type);
return; return;
} }
const step = +this.step; const diff = type === 'minus' ? -this.step : +this.step;
const currentValue = +this.currentValue; const value = Math.round((this.currentValue + diff) * 100) / 100;
this.currentValue = type === 'minus' ? (currentValue - step) : (currentValue + step); this.currentValue = this.range(value);
this.emitInput();
this.$emit(type); this.$emit(type);
}, },
onBlur(event) { onBlur(event) {
if (!this.value) { this.currentValue = this.range(this.currentValue);
this.currentValue = +this.min;
} else {
this.currentValue = this.correctValue(+this.currentValue);
}
this.emitInput();
this.$emit('blur', event); this.$emit('blur', event);
},
emitInput() {
this.$emit('input', this.currentValue);
this.$emit('change', this.currentValue);
} }
} }
}); });

14
packages/stepper/test/index.spec.js
View File

@ -62,15 +62,7 @@ test('correct value when value is not correct', () => {
wrapper.setData({ value: 30 }); wrapper.setData({ value: 30 });
input.trigger('input'); input.trigger('input');
expect(wrapper.emitted('input')).toEqual([ expect(wrapper.emitted('input')).toEqual([[30], [1], [0], [40], [30]]);
[30],
[1],
[0],
[0],
[0],
[30],
[30]
]);
}); });
test('only allow interger', () => { test('only allow interger', () => {
@ -85,7 +77,7 @@ test('only allow interger', () => {
input.trigger('input'); input.trigger('input');
input.trigger('blur'); input.trigger('blur');
expect(wrapper.emitted('input')).toEqual([[1.2], [1]]); expect(wrapper.emitted('input')).toEqual([[1]]);
}); });
test('stepper blur', () => { test('stepper blur', () => {
@ -106,6 +98,6 @@ test('stepper blur', () => {
input.trigger('input'); input.trigger('input');
input.trigger('blur'); input.trigger('blur');
expect(wrapper.emitted('input')).toEqual([[5], [0], [3]]); expect(wrapper.emitted('input')).toEqual([[0], [3]]);
expect(wrapper.emitted('blur')).toBeTruthy(); expect(wrapper.emitted('blur')).toBeTruthy();
}); });