为了在 el-input
中实现这种功能,我们可以在 v-model
的输入值发生变化时进行格式化。
<template>
<el-input
v-model="addForm.accrateval"
@input="formatInput"
placeholder="请输入数字"
/>
</template>
<script>
export default {
data() {
return {
addForm: {
accrateval: '', // 用于绑定输入值
},
};
},
methods: {
formatInput(value) {
// 1. 去除非数字和小数点字符,且保证小数点最多一个
let val = value.replace(/[^\d.]/g, '');
// 2. 分割整数部分和小数部分
const parts = val.split('.');
let integerPart = parts[0].slice(0, 9); // 整数部分最多9位
let decimalPart = parts[1] || '';
// 3. 如果小数部分存在,保留最多2位
decimalPart = decimalPart.slice(0, 2);
// 4. 如果有小数部分,补足两位;如果没有小数部分,补“.00”
if (decimalPart) {
val = integerPart + '.' + decimalPart.padEnd(2, '0');
} else {
val = integerPart + '.00';
}
// 5. 逢三切断
val = val.replace(/(\d)(?=(\d{3})+(\.))/g, '\$1,');
// 更新输入框的值
this.addForm.accrateval = val;
},
},
};
</script>
注释:
- 输入
1234567
时,最终显示1,234,567.00
。 - 输入
1234567.89
时,显示1,234,567.89
。 - 输入
1234567890
时,显示123,456,789.00
(整数超过9位会被限制为9位)。
//方案2
不逢三切断 , 整数6位, 小数2位
<el-input
style="width:150px;"
v-model="addForm.accrateval"
maxlength="9"
oninput="value=value.replace(/^(\d{0,6}(?:\.\d{0,2})?).*$/g, '$1')"
@blur="$event.target.value?addForm.accrateval = Number($event.target.value)?Number($event.target.value).toFixed(2):'':''"
/>
输入 1234567
时,最终显示 123456时,显示123456.00
输入 123456.11
时,最终显示 123456.11