feat(number): add decimal limit

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({

packages/devui-vue/devui/input-number/src/input-number-types.ts

@@ -39,6 +39,9 @@ export const inputNumberProps = {
     type: Boolean,
     default: true,
   },
+  decimalLimit: {
+    type: Number,
+  },
   allowEmpty: {
     type: Boolean,
     default: false,

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}

packages/devui-vue/devui/input-number/src/use-input-number.ts

@@ -83,6 +83,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;
@@ -130,6 +137,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;
   };
 

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,
     };
   },
 });
@@ -223,6 +223,33 @@ 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>
+```
+
+:::
+
 ### 允许空值
 
 :::demo 当 `allowEmpty` 为 `true` 的时候允许输入框的值为空，空值返回为 `null`，传入数据不为 `number` 类型且上一次输入没有值的时候都会返回null。
@@ -251,23 +278,23 @@ export default defineComponent({
 </script>
 ```
 
-:::
 
 ### 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`    |  --   | 可选，用于限制输入的正则或正则字符串 | [正则限制](#正则限制)|
-| allowEmpty	| `boolean \| false`	 |  --   | 可选，是否允许值为空	允许空值 | [允许空值](#允许空值) |
-|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` | --        | 可选，用于限制输入的正则或正则字符串 | [正则限制](#正则限制) |
+| allowEmpty	    | `boolean \| false` |  --      | 可选，是否允许值为空	允许空值      | [允许空值](#允许空值) |
+| show-glow-style | `boolean`         | true      | 可选，是否展示悬浮发光效果           |                       |
 
 ### InputNumber 事件