<el-input v-model="addform.cost" placeholder="请输入数字"
@blur="costChange"
@focus="() => {this.addform.cost = remoney(this.addform.cost)}"
@input="limitInput($event,'cost')">
</el-input>
1.input输入事件控制输入内容仅为数字且限制两位小数
limitInput(value, name) {
this.addform[name] =
("" + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
}
2.鼠标移除事件触发costChange,将输入内容千分位两位小数展示
costChange(e) {
//获取输入的数据,若不写这行,数据可能输不进去
this.addform.cost = e.target.value;
//将用户输入的数据,自动转换为带千分符的
this.addform.cost = this.fmoney(this.addform.cost);
}
3.鼠标移入事件调用remoney将输入框内的千分位字符串数,转为纯数字。
//千分位反格式化:10,000.00转为10000.00
remoney(s) {
let str = ''
if (s) {
str = String(s).replace(/,/g, "")
}
if (s && (s + "").indexOf('.') > -1 && Number(str)) {
return String(s).replace(/[^\d\.-]/g, "");
} else if (s && Number(str)) {
return str;
} else {
return s
}
}
4.传给后端时再次调用remoney将千分位字符串转为纯数字即可。