构建一个支持精度、范围和负数的-Vue-数字输入框

分析并实现一个支持精度、范围和负数控制的数字输入框。

背景

在很多业务中，我们经常需要使用数字输入框，通常这些输入框会涉及到数字校验，比如限制输入范围、设置小数精度、是否允许负数等。每次写表单时，都需要重复定义这些校验规则，这不仅繁琐，而且无法满足灵活配置的需求。因此，我想到了能否将这些功能抽象成一个通用的、可复用的组件，避免每次都写重复的逻辑。

思路

直接限制输入，处理好输入的内容，就可以避免复杂的校验步骤了。有下面两种实现方式，我选择用组件的方式去实现，便于迁移。

• 自定义指令
• 自定义组件

设计与实现

设计

• 精度控制：控制小数的位数，默认为0，即整数
• 范围控制：配置最大值和最小值
• 负数输入：是否支持负数

实现

借用 element-UI 中的 el-input 组件实现。

需要特别注意的是：

• 必须先处理负号
• 如果小数点位数为 0 ，需要去掉小数点字符

Q&A

为什么不用 el-input-number

• 默认值问题：当设置了min="0"时，会有默认值0。
• 负数输入限制：不支持
• 精度控制：只支持步长，不支持小数点精度控制

使用

参考

无。

首发地址：http://blog.xchive.top/2025/building-vue-number-input.html