From f55e5ba29903a6555f0e86705424f4a81cea6ea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Wed, 29 May 2024 06:54:42 -0400 Subject: [PATCH 1/5] fix(number): add for input element (#1864) --- packages/devui-vue/devui/input-number/src/input-number.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/devui-vue/devui/input-number/src/input-number.tsx b/packages/devui-vue/devui/input-number/src/input-number.tsx index 2165c4490e..e30b675047 100644 --- a/packages/devui-vue/devui/input-number/src/input-number.tsx +++ b/packages/devui-vue/devui/input-number/src/input-number.tsx @@ -27,6 +27,7 @@ export default defineComponent({
Date: Wed, 29 May 2024 06:56:53 -0400 Subject: [PATCH 2/5] feat(number): add `decimalLimit` prop for `InputNumber` component --- .../input-number/src/input-number-types.ts | 4 +++ .../input-number/src/use-input-number.ts | 18 +++++++++++++ .../docs/components/input-number/index.md | 26 +++++++++++++++++++ 3 files changed, 48 insertions(+) diff --git a/packages/devui-vue/devui/input-number/src/input-number-types.ts b/packages/devui-vue/devui/input-number/src/input-number-types.ts index d0e52a4566..c5ea9c9bc1 100644 --- a/packages/devui-vue/devui/input-number/src/input-number-types.ts +++ b/packages/devui-vue/devui/input-number/src/input-number-types.ts @@ -39,6 +39,10 @@ export const inputNumberProps = { type: Boolean, default: true, }, + decimalLimit: { + type: Number || null, + default: 2, + }, } as const; export type InputNumberProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/input-number/src/use-input-number.ts b/packages/devui-vue/devui/input-number/src/use-input-number.ts index 31c1244071..9a9da70604 100644 --- a/packages/devui-vue/devui/input-number/src/use-input-number.ts +++ b/packages/devui-vue/devui/input-number/src/use-input-number.ts @@ -84,6 +84,13 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R } }); + const decimalLimit = computed(() => { + if (isUndefined(props.decimalLimit)) { + return null; + } + return props.decimalLimit; + }); + const inputVal = computed(() => { if (!isUndefined(state.userInputValue)) { return state.userInputValue; @@ -132,6 +139,17 @@ export function useEvent(props: InputNumberProps, ctx: SetupContext, inputRef: R if (newVal > max.value || newVal < min.value) { newVal = newVal > max.value ? max.value : min.value; } + + // 精度限制存在才做限制 + if (decimalLimit.value) { + const splitVal = newVal.toString().split('.'); + if (splitVal.length > 1) { + const decimalVal = splitVal[1]; + if (decimalVal.length > decimalLimit.value) { + newVal = Number.parseFloat(newVal.toFixed(decimalLimit.value)); + } + } + } return newVal; }; diff --git a/packages/devui-vue/docs/components/input-number/index.md b/packages/devui-vue/docs/components/input-number/index.md index d6c6c29fd6..5fea3b2579 100644 --- a/packages/devui-vue/docs/components/input-number/index.md +++ b/packages/devui-vue/docs/components/input-number/index.md @@ -223,6 +223,32 @@ export default defineComponent({ ::: +### 限制小数 + +:::demo 设置 `decimalLimit` 属性可以限制小数位数。设置此参数后会将所有小数点后面的数字截断，而不是四舍五入。 + +```vue + + +``` + +::: + ### InputNumber 参数 | 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | From 0b2e335453c36d0a84392b1f62e6466c1c6aa69c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Wed, 29 May 2024 07:14:39 -0400 Subject: [PATCH 3/5] feat(number): remove default for decimalLimit --- .../devui-vue/devui/input-number/src/input-number-types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/input-number/src/input-number-types.ts b/packages/devui-vue/devui/input-number/src/input-number-types.ts index c5ea9c9bc1..2da2d630ab 100644 --- a/packages/devui-vue/devui/input-number/src/input-number-types.ts +++ b/packages/devui-vue/devui/input-number/src/input-number-types.ts @@ -40,8 +40,7 @@ export const inputNumberProps = { default: true, }, decimalLimit: { - type: Number || null, - default: 2, + type: Number, }, } as const; From 39dfe4b50b017ca5885b5f5181ba5d4953f23478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Wed, 29 May 2024 07:21:32 -0400 Subject: [PATCH 4/5] test(number): add unittest for decimal limitation --- .../__tests__/input-number.spec.tsx | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx b/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx index b562c29147..93a296a2b6 100644 --- a/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx +++ b/packages/devui-vue/devui/input-number/__tests__/input-number.spec.tsx @@ -109,6 +109,28 @@ describe('d-input-number', () => { wrapper.unmount(); }); + it('decimal limit', async () => { + const num = ref(1); + const wrapper = mount({ + setup() { + return () => ; + }, + }); + + const inputInner = wrapper.find(ns.e('input-box')); + expect((inputInner.element as HTMLInputElement).value).toBe('1'); + + num.value = 1.23456; + await nextTick(); + expect((inputInner.element as HTMLInputElement).value).toBe('1.23'); + + num.value = 1.99999; + await nextTick(); + expect((inputInner.element as HTMLInputElement).value).toBe('1.99'); + + wrapper.unmount(); + }); + it('size', async () => { const num = ref(1); const wrapper = mount({ From 49a128fc5f560571f5cf53e8eb38a81506da5832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= Date: Wed, 29 May 2024 07:37:46 -0400 Subject: [PATCH 5/5] docs(number): update decimalLimit prop --- .../docs/components/input-number/index.md | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/devui-vue/docs/components/input-number/index.md b/packages/devui-vue/docs/components/input-number/index.md index 5fea3b2579..30c9985174 100644 --- a/packages/devui-vue/docs/components/input-number/index.md +++ b/packages/devui-vue/docs/components/input-number/index.md @@ -190,7 +190,7 @@ export default defineComponent({
reg
- +
regStr
@@ -208,7 +208,7 @@ export default defineComponent({ num1, num2, reg, - regStr + regStr, }; }, }); @@ -240,7 +240,7 @@ export default defineComponent({ setup() { const num = ref(3.9); return { - num + num, }; }, }); @@ -251,18 +251,19 @@ export default defineComponent({ ### InputNumber 参数 -| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | -|:------------|:----------------|:-----------|:-------------------|:-------------------| -| v-model | `number` | -- | 可选，文本框的值 | [基本用法](#基本用法) | -| step | `number` | 1 | 可选，步数 | [步数](#步数) | -| placeholder | `string` | -- | 可选，文本框 placeholder | [基本用法](#基本用法) | -| max | `number` | Infinity | 可选，输入框的最大值 max | [数值范围](#数值范围) | -| min | `number` | -Infinity | 可选，输入框的最小值 min | [数值范围](#数值范围) | -| disabled | `boolean` | false | 可选，文本框是否被禁用 | [禁用状态](#禁用状态) | -| precision | `number` | -- | 可选，数值精度 | [精度](#精度) | -| size | [ISize](#isize) | 'md' | 可选，文本框尺寸 | [尺寸](#尺寸) | -| reg | `RegExp\| string` | -- | 可选，用于限制输入的正则或正则字符串 | [正则限制](#正则限制)| -|show-glow-style|`boolean`|true|可选，是否展示悬浮发光效果|| +| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo | +| :-------------- | :---------------- | :-------- | :----------------------------------- | :-------------------- | +| v-model | `number` | -- | 可选，文本框的值 | [基本用法](#基本用法) | +| step | `number` | 1 | 可选，步数 | [步数](#步数) | +| placeholder | `string` | -- | 可选，文本框 placeholder | [基本用法](#基本用法) | +| max | `number` | Infinity | 可选，输入框的最大值 max | [数值范围](#数值范围) | +| min | `number` | -Infinity | 可选，输入框的最小值 min | [数值范围](#数值范围) | +| disabled | `boolean` | false | 可选，文本框是否被禁用 | [禁用状态](#禁用状态) | +| precision | `number` | -- | 可选，数值精度 | [精度](#精度) | +| decimalLimit | `number` | -- | 可选，限制小数长度 | [限制小数](#限制小数) | +| size | [ISize](#isize) | 'md' | 可选，文本框尺寸 | [尺寸](#尺寸) | +| reg | `RegExp\| string` | -- | 可选，用于限制输入的正则或正则字符串 | [正则限制](#正则限制) | +| show-glow-style | `boolean` | true | 可选，是否展示悬浮发光效果 | | ### InputNumber 事件