最终实现效果:不可输入数字和小数点以外的,且不能多次输入小数点,输入小数位数超过限制的话将不允许再往后输入
// 监听可输入小数的数字输入框的 input事件
// 参数一value,输入的值,参数二obj,监听的对象,参数三prop,监听的属性
export function floatInputChange(value, obj, prop) {
if (!obj || !prop || !value) {
return
}
// 不允许只输入小数点
if (value === '.') {
obj[prop.toString()] = ''
return
}
// 不可输入数字和小数点以外的,且不能多次输入小数点
obj[prop.toString()] = value.replace(/[^0-9.]/g, '').replace(/(\.)(\d*)(\1*)/g, '$1$2')
const Decimals = obj[prop.toString()].split('.')[1]
// 输入小数位数超过限制的话,截取前面几位
// floatDigit是项目中配置文件中的小数位数变量
if (Decimals && Decimals.length > floatDigit) {
obj[prop.toString()] = obj[prop.toString()].substring(0, obj[prop.toString()].indexOf('.') + floatDigit + 1)
}
}
注意事项:
只能监听el-input输入框的input事件,el-input-number组件的input事件拿不到当前输入框的值,只能拿到此次输入的一个字符,且该组件input事件不会一输入值就触发,触发时机跟change事件一致