From f55e5ba29903a6555f0e86705424f4a81cea6ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
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({
</div>
<div class={inputWrapClass.value}>
<input
+ type="number"
ref={inputRef}
value={inputVal.value}
placeholder={props.placeholder}
From e63ffc47f0d08e17c9864ca8c722a8a4916cb560 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
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<typeof inputNumberProps>;
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
+<template>
+ <div>
+ <d-input-number v-model="num" :decimalLimit="1" :step="0.1"></d-input-number>
+ </div>
+</template>
+<script>
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+ setup() {
+ const num = ref(3.9);
+ return {
+ num
+ };
+ },
+});
+</script>
+```
+
+:::
+
### InputNumber 参数
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
From 0b2e335453c36d0a84392b1f62e6466c1c6aa69c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E5=90=91=E5=A4=9C?= <fu050409@163.com>
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?= <fu050409@163.com>
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 () => <DInputNumber v-model={num.value} decimalLimit={2}></DInputNumber>;
+ },
+ });
+
+ 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?= <fu050409@163.com>
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({
<div>
<div class="space">reg</div>
<d-input-number v-model="num1" :reg="reg"></d-input-number>
-
+
<div class="space">regStr</div>
<d-input-number v-model="num2" :reg="regStr"></d-input-number>
</div>
@@ -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 事件