feat(number): add decimalLimit prop for InputNumber component

Author: fu050409

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>;

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;
   };
 

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            |