blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(Stepper): skip form number validation (#5792)

Browse Source
This commit is contained in:
chenjiahan 2020-03-11 17:24:22 +08:00
parent 3ff8eee270
commit 7af2c99b4a
7 changed files with 31 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/field/utils.ts
View File

@ -6,6 +6,8 @@ export function formatNumber(value: string, allowDot: boolean) {
value =
value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
}
} else {
value = value.split('.')[0];
}
const regExp = allowDot ? /[^0-9.]/g : /\D/g;

2
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -120,7 +120,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell__value van-field__value">
<div class="van-field__body">
<div class="van-field__control van-field__control--custom">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
</div>

28
src/stepper/index.js
View File

@ -2,6 +2,7 @@ import { createNamespace, isDef, addUnit } from '../utils';
import { resetScroll } from '../utils/dom/reset-scroll';
import { preventDefault } from '../utils/dom/event';
import { FieldMixin } from '../mixins/field';
import { formatNumber } from '../field/utils';
const [createComponent, bem] = createNamespace('stepper');
@ -142,19 +143,13 @@ export default createComponent({
}
},
// filter illegal characters
filter(value) {
value = String(value).replace(/[^0-9.-]/g, '');
if (this.integer && value.indexOf('.') !== -1) {
value = value.split('.')[0];
}
return value;
// formatNumber illegal characters
formatNumber(value) {
return formatNumber(String(value), !this.integer);
},
format(value) {
value = this.filter(value);
value = this.formatNumber(value);
// format range
value = value === '' ? 0 : +value;
@ -171,12 +166,7 @@ export default createComponent({
onInput(event) {
const { value } = event.target;
// allow input to be empty
if (value === '') {
return;
}
let formatted = this.filter(value);
let formatted = this.formatNumber(value);
// limit max decimal length
if (isDef(this.decimalLength) && formatted.indexOf('.') !== -1) {
@ -290,15 +280,15 @@ export default createComponent({
{...createListeners('minus')}
/>
<input
type={this.integer ? 'tel' : 'number'}
type={this.integer ? 'tel' : 'text'}
role="spinbutton"
class={bem('input')}
// set keyboard in mordern browers
inputmode={this.integer ? 'numeric' : 'decimal'}
value={this.currentValue}
style={this.inputStyle}
disabled={this.disabled}
readonly={this.disableInput}
// set keyboard in mordern browers
inputmode={this.integer ? 'numeric' : 'decimal'}
aria-valuemax={this.max}
aria-valuemin={this.min}
aria-valuenow={this.currentValue}

6
src/stepper/index.less
View File

@ -94,10 +94,4 @@
cursor: default;
}
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
}

16
src/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -5,19 +5,19 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>基础用法</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>步长设置</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>限制输入范围</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
@ -29,31 +29,31 @@ exports[`renders demo correctly 1`] = `
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>禁用状态</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" disabled="disabled" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" disabled="disabled" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>禁用输入框</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" readonly="readonly" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>固定小数位数</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>自定义大小</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button type="button" class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button type="button" class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
</div>
</div>
<div class="van-cell van-cell--center">
<div class="van-cell__title"><span>异步变更</span></div>
<div class="van-cell__value">
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
</div>
</div>
</div>

10
src/stepper/test/__snapshots__/index.spec.js.snap
View File

@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`button-size prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 2rem; height: 2rem;"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 2rem;"><button type="button" class="van-stepper__plus" style="width: 2rem; height: 2rem;"></button></div>`;
exports[`button-size prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 2rem; height: 2rem;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 2rem;"><button type="button" class="van-stepper__plus" style="width: 2rem; height: 2rem;"></button></div>`;
exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" readonly="readonly" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>`;
exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" disabled="disabled" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
exports[`disabled stepper 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" disabled="disabled" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;
exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;

11
src/stepper/test/index.spec.js
View File

@ -115,17 +115,17 @@ test('filter value during user input', () => {
const input = wrapper.find('.van-stepper__input');
input.element.value = '';
input.trigger('input');
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper.emitted('input')[0][0]).toEqual('');
input.element.value = 'a';
input.trigger('input');
expect(input.element.value).toEqual('');
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper.emitted('input')[1]).toBeFalsy();
input.element.value = '2';
input.trigger('input');
expect(input.element.value).toEqual('2');
expect(wrapper.emitted('input')[0][0]).toEqual('2');
expect(wrapper.emitted('input')[1][0]).toEqual('2');
});
test('shoud watch value and format it', () => {
@ -179,9 +179,10 @@ test('stepper blur', () => {
const input = wrapper.find('input');
input.element.value = '';
input.trigger('input');
input.trigger('blur');
expect(wrapper.emitted('input')[0][0]).toEqual('');
expect(wrapper.emitted('input')[0][0]).toEqual(3);
input.trigger('blur');
expect(wrapper.emitted('input')[1][0]).toEqual(3);
expect(wrapper.emitted('blur')).toBeTruthy();
});