feat(button): add decimalLimit prop for InputNumber component

DevCloudFE · May 29, 2024 · 0caa17d · 0caa17d
1 parent 542f754
commit 0caa17d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 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
@@ -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
@@ -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
@@ -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 |