diff --git a/packages/vant/src/stepper/README.md b/packages/vant/src/stepper/README.md index fc40cd532..e24fa7a0e 100644 --- a/packages/vant/src/stepper/README.md +++ b/packages/vant/src/stepper/README.md @@ -126,6 +126,7 @@ export default { | v-model | Current value | _number \| string_ | - | | min | Min value | _number \| string_ | `1` | | max | Max value | _number \| string_ | - | +| auto-fixed | Whether to auto fix value that is out of range, set to `false` and value that is out of range won’t be auto fixed | _boolean_ | `true` | | default-value | Default value, valid when v-model is empty | _number \| string_ | `1` | | step | Value change step | _number \| string_ | `1` | | name | Stepper name, usually a unique string or number | _number \| string_ | - | diff --git a/packages/vant/src/stepper/README.zh-CN.md b/packages/vant/src/stepper/README.zh-CN.md index 20ad67781..41659b546 100644 --- a/packages/vant/src/stepper/README.zh-CN.md +++ b/packages/vant/src/stepper/README.zh-CN.md @@ -47,7 +47,7 @@ export default { ### 限制输入范围 -通过 `min` 和 `max` 属性限制输入值的范围。 +通过 `min` 和 `max` 属性限制输入值的范围,默认超出范围后会自动校正最大值或最小值,通过 `auto-fixed` 可以关闭自动校正。 ```html @@ -146,6 +146,7 @@ export default { | v-model | 当前输入的值 | _number \| string_ | - | | min | 最小值 | _number \| string_ | `1` | | max | 最大值 | _number \| string_ | - | +| auto-fixed | 是否自动校正超出限制范围的数值,设置为 `false` 后输入超过限制范围的数值将不会自动校正 | _boolean_ | `true` | | default-value | 初始值,当 v-model 为空时生效 | _number \| string_ | `1` | | step | 步长,每次点击时改变的值 | _number \| string_ | `1` | | name | 标识符,通常为一个唯一的字符串或数字,可以在 `change` 事件回调参数中获取 | _number \| string_ | - | diff --git a/packages/vant/src/stepper/Stepper.tsx b/packages/vant/src/stepper/Stepper.tsx index 7a50a7865..5ef45ec9c 100644 --- a/packages/vant/src/stepper/Stepper.tsx +++ b/packages/vant/src/stepper/Stepper.tsx @@ -52,6 +52,7 @@ export const stepperProps = { showMinus: truthProp, showInput: truthProp, longPress: truthProp, + autoFixed: truthProp, allowEmpty: Boolean, modelValue: numericProp, inputWidth: numericProp, @@ -83,7 +84,7 @@ export default defineComponent({ ], setup(props, { emit }) { - const format = (value: Numeric) => { + const format = (value: Numeric, autoFixed = true) => { const { min, max, allowEmpty, decimalLength } = props; if (allowEmpty && value === '') { @@ -93,7 +94,9 @@ export default defineComponent({ value = formatNumber(String(value), !props.integer); value = value === '' ? 0 : +value; value = Number.isNaN(value) ? +min : value; - value = Math.max(Math.min(+max, value), +min); + + // whether to format the value entered by the user + value = autoFixed ? Math.max(Math.min(+max, value), +min) : value; // format decimal if (isDef(decimalLength)) { @@ -204,7 +207,7 @@ export default defineComponent({ const onBlur = (event: Event) => { const input = event.target as HTMLInputElement; - const value = format(input.value); + const value = format(input.value, props.autoFixed); input.value = String(value); current.value = value; nextTick(() => { diff --git a/packages/vant/src/stepper/test/index.spec.ts b/packages/vant/src/stepper/test/index.spec.ts index 592b665d0..de67e054f 100644 --- a/packages/vant/src/stepper/test/index.spec.ts +++ b/packages/vant/src/stepper/test/index.spec.ts @@ -249,6 +249,26 @@ test('should format input value when stepper blurred', async () => { expect(wrapper.emitted('blur')).toBeTruthy(); }); +test('should not format input value when stepper blurred if set auto-fixed to false', async () => { + const wrapper = mount(Stepper, { + props: { + min: 5, + max: 8, + autoFixed: false, + }, + }); + + const input = wrapper.find('input'); + + input.element.value = '2'; + await input.trigger('blur'); + expect(wrapper.emitted('update:modelValue')![1]).toEqual([2]); + + input.element.value = '10'; + await input.trigger('blur'); + expect(wrapper.emitted('update:modelValue')![2]).toEqual([10]); +}); + test('should update input width when using input-width prop', () => { const wrapper = mount(Stepper, { props: {