el-input type=number时无法在小数点后输入0

293 阅读6分钟

在使用 element-plus 开发时,遇到一个 bug,当使用<el-input type="number" v-model.number="count"/>会导致无法在小数点后输入0。后面尝试在 element-ui 中测试,发现这是一个常年的 bug,从 element-ui 时代便有,一直延续到 element-plus。

原因.number修饰符和<el-input>组件有冲突。

.number是为了保证输入的数据类型为 number,不需要做数据类型转换,type=number是做输入限制,只允许输入数字。

在线demo: el-input number bug

image-2023-12-7_15-0-19.png

image-2023-12-7_15-5-11.png

最简单有效的方法就是把.number去除,添加 blur 事件,具体可看 demo 代码。

除此之外,还有其他方法,比如去除.number之后,手动转换数据格式,或者手动限制输入字符为数字等。另外还可以使用 element-plus 提供的另一个组件: <el-input-number> 但是这个组件的样式和 <el-input>会有所区别,需要根据实际情况选择更适宜的组件。