优化公司网站,注册安全工程师职业资格制度规定,wordpress无插件自动实现tag关键字内链,北京室内设计公司排名分析并实现一个支持精度、范围和负数控制的数字输入框。
背景
在很多业务中#xff0c;我们经常需要使用数字输入框#xff0c;通常这些输入框会涉及到数字校验#xff0c;比如限制输入范围、设置小数精度、是否允许负数等。每次写表单时#xff0c;都需要重复定义这些校…分析并实现一个支持精度、范围和负数控制的数字输入框。
背景
在很多业务中我们经常需要使用数字输入框通常这些输入框会涉及到数字校验比如限制输入范围、设置小数精度、是否允许负数等。每次写表单时都需要重复定义这些校验规则这不仅繁琐而且无法满足灵活配置的需求。因此我想到了能否将这些功能抽象成一个通用的、可复用的组件避免每次都写重复的逻辑。
思路
直接限制输入处理好输入的内容就可以避免复杂的校验步骤了。有下面两种实现方式我选择用组件的方式去实现便于迁移。
自定义指令自定义组件
设计与实现
设计
精度控制控制小数的位数默认为0即整数范围控制配置最大值和最小值负数输入是否支持负数
实现
借用 element-UI 中的 el-input 组件实现。
需要特别注意的是
必须先处理负号如果小数点位数为 0 需要去掉小数点字符
templateel-inputv-modellocalValueinputhandleInput:placeholderplaceholder:clearableclearable/
/templatescript
export default {name: NumberInput,props: {value: {type: [Number, String],default: null},min: {type: Number,default: -Infinity},max: {type: Number,default: Infinity},/*** 小数点后保留的位数*/precision: {type: Number,default: 0},/*** 是否允许输入负数*/allowNegative: {type: Boolean,default: false},placeholder: {type: String,default: 请输入数字},clearable: {type: Boolean,default: true}},data() {return {localValue: this.value || }},watch: {value(newValue) {if (newValue ! this.localValue) {this.localValue newValue}},localValue(newValue) {this.$emit(input, newValue)}},methods: {handleInput() {let value this.localValue// 如果允许负数先处理负号const isNegative value.startsWith(-)if (isNegative !this.allowNegative) {value value.replace(-, ) // 如果不允许负数去掉负号}// 如果 precision 为 0则禁止输入小数点if (this.precision 0) {value value.replace(/\./g, ) // 禁止输入小数点}// 格式化为最多 precision 位小数const decimalRegex ^\\D*(\\d*(?:\\.\\d{0,${this.precision}})?).*value value.replace(new RegExp(decimalRegex), $1)// 如果之前是负数重新加上负号if (isNegative this.allowNegative) {value -${value}}// 限制最大值和最小值if (parseFloat(value) this.min) {value String(this.min)} else if (parseFloat(value) this.max) {value String(this.max)}// 更新本地值this.localValue value}}
}
/scriptstyle scoped
/style
QA
为什么不用 el-input-number
默认值问题当设置了min0时会有默认值0。负数输入限制不支持精度控制只支持步长不支持小数点精度控制
使用
number-input v-modelamount:min0:max9999:precision2:allowNegativetrueplaceholder请输入金额
/参考
无。
首发地址http://blog.xchive.top/2025/building-vue-number-input.html
