问题背景
项目:vue2 + element ui
老板说:有一个需求,这个输入框最多输入4位数,如果有小数的话,最多输入4位小数,能做吗?
我说:“能!”
然后我就兴冲冲地做了起来。
我一想:“这个直接用el-input-number
写不就好了吗”
然后我设置了:(最大值9999,精度设置为4,即保留4位小数)
<el-input-number
placeholder="请输入内容"
v-model="setPipeItem.designLength"
:max="9999"
:controls="false"
:precision="4"
></el-input-number>
过了一会,老板找我说,现在有2个问题:
- 输入55,直接变成
55.0000
了,用户体验不好,要求如果没有输入小数,不要自动补全! - 输入123456,自动变成
9999.0000
了,要求如果123456,只取1234,后面不要了,不要变成9999.0000
我说:“行”
官网示例
输入5,精度为2,自动变成了5.00,这不是我们想要的
改进过程
饿了么组件已经无法实现我们的需求了,我们就自己写吧
<el-input
placeholder="请输入内容"
v-model="setPipeItem.designLength"
type="number"
@input="trimInput"
></el-input>
// 自定义方法
trimInput(value) {
const numberParts = (value || '').split('.');
let integerPart = numberParts[0];
let fractionPart = numberParts[1] || '';
// 限制整数部分最大为4位
if (integerPart.replace(/\D/g, '').length > 4) {
integerPart = integerPart.substring(0, 4);
}
// 限制小数部分最大为4位
if (fractionPart.length > 4) {
fractionPart = fractionPart.substring(0, 4);
}
// 如果小数部分为空,则不显示小数点
this.setPipeItem.designLength = `${integerPart}${fractionPart.length > 0 ? '.' + fractionPart : ''}`;
},