diff --git a/examples/sites/demos/apis/numeric.js b/examples/sites/demos/apis/numeric.js index 74530b6a5b..4146bd4a36 100644 --- a/examples/sites/demos/apis/numeric.js +++ b/examples/sites/demos/apis/numeric.js @@ -309,13 +309,29 @@ export default { 'en-US': 'Whether to enter only multiples of step' }, mode: ['pc', 'mobile', 'mobile-first'], - pcDemo: 'step', + pcDemo: 'about-step', mobileDemo: 'step', mfDemo: '' }, + { + name: 'step-restore', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '当输入值,非step步长的倍数时,是否还原上一个值', + 'en-US': 'When the input value is not a multiple of the step size, should the previous value be restored' + }, + meta: { + stable: '3.20.0' + }, + mode: ['pc'], + pcDemo: 'about-step', + mobileDemo: '', + mfDemo: '' + }, { name: 'strict-input', - type: 'Boolean', + type: 'boolean', defaultValue: '', desc: { 'zh-CN': '严格控制输入,包含合法性输入与小数点长度验证,不允许输入超过精度设置', diff --git a/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue b/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue index eae958efd8..a3f0c81880 100644 --- a/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue +++ b/examples/sites/demos/pc/app/numeric/about-step-composition-api.vue @@ -1,5 +1,14 @@ + + diff --git a/examples/sites/demos/pc/app/numeric/about-step.spec.ts b/examples/sites/demos/pc/app/numeric/about-step.spec.ts index d5ee82661d..85f6d56bb8 100644 --- a/examples/sites/demos/pc/app/numeric/about-step.spec.ts +++ b/examples/sites/demos/pc/app/numeric/about-step.spec.ts @@ -4,15 +4,23 @@ test('步长', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('numeric#about-step') - const input = page.getByRole('spinbutton') - const increaseBtn = page.locator('.tiny-numeric__increase') - const decreaseBtn = page.locator('.tiny-numeric__decrease') - const value = Number(await input.inputValue()) - const step = 2 - await decreaseBtn.click() - const decreasedVal = Number(await input.inputValue()) - expect(value).toEqual(decreasedVal + step) - await increaseBtn.click() - const increasedVal = Number(await input.inputValue()) - expect(decreasedVal).toEqual(increasedVal - step) + await page.getByRole('button').nth(1).click() + await page.getByRole('spinbutton').first().fill('56') + await page + .locator('div') + .filter({ hasText: /step-restore/ }) + .first() + .click() + const inputValue = await page.locator('.tiny-numeric__input-inner').first().inputValue() + expect(inputValue).toEqual('5') + + await page.getByRole('button').nth(3).click() + await page.getByRole('spinbutton').nth(1).fill('56') + await page + .locator('div') + .filter({ hasText: /step-strictly/ }) + .first() + .click() + const input = await page.locator('.tiny-numeric__input-inner').nth(1).inputValue() + expect(input).toEqual('55') }) diff --git a/examples/sites/demos/pc/app/numeric/about-step.vue b/examples/sites/demos/pc/app/numeric/about-step.vue index d3ac9ba9d6..ac50461276 100644 --- a/examples/sites/demos/pc/app/numeric/about-step.vue +++ b/examples/sites/demos/pc/app/numeric/about-step.vue @@ -1,5 +1,14 @@ + + diff --git a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js index 3ea5663c0d..bf74f26ec4 100644 --- a/examples/sites/demos/pc/app/numeric/webdoc/numeric.js +++ b/examples/sites/demos/pc/app/numeric/webdoc/numeric.js @@ -35,8 +35,10 @@ export default { 'en-US': 'Step' }, desc: { - 'zh-CN': '可通过step属性设置计数器的加减数值。', - 'en-US': 'Set the addition and subtraction values of the counter through thestepattribute.' + 'zh-CN': + '可通过step属性设置计数器的加减数值,step-restore属性设置是否还原上一个值,step-strictly属性设置只能输入 step 的倍数', + 'en-US': + 'Set the addition and subtraction values of the counter through thestepattribute,step-restoreproperty setting whether to restore the previous value,step restrictedThe attribute setting can only input multiples of step' }, codeFiles: ['about-step.vue'] }, diff --git a/packages/renderless/src/numeric/index.ts b/packages/renderless/src/numeric/index.ts index 17e31c9087..83ac5f3c03 100644 --- a/packages/renderless/src/numeric/index.ts +++ b/packages/renderless/src/numeric/index.ts @@ -302,6 +302,11 @@ export const setCurrentValue = if (validateEvent) { dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.change, [state.currentValue]) } + + if (props.stepRestore && props.step > 1 && newVal % Number(props.step) !== 0) { + state.currentValue = oldVal + state.userInput = oldVal + } } } diff --git a/packages/vue/src/numeric/src/index.ts b/packages/vue/src/numeric/src/index.ts index 1b07b3a849..c5fbc2c3c9 100644 --- a/packages/vue/src/numeric/src/index.ts +++ b/packages/vue/src/numeric/src/index.ts @@ -97,6 +97,10 @@ export const numericProps = { type: [Number, String], default: 1 }, + stepRestore: { + type: Boolean, + default: false + }, stepStrictly: { type: Boolean, default: false diff --git a/packages/vue/src/numeric/src/pc.vue b/packages/vue/src/numeric/src/pc.vue index de7962b375..5c6c21cac5 100644 --- a/packages/vue/src/numeric/src/pc.vue +++ b/packages/vue/src/numeric/src/pc.vue @@ -223,6 +223,7 @@ export default defineComponent({ ...props, 'step', 'tabindex', + 'stepRestore', 'stepStrictly', 'max', 'min',