<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);
},
//千分位格式化：10000转为10,000.00
fmoney(s, n) {
if (s == '' || s == null || s == undefined | isNaN(Number(s))) {
return s
}
s = Number(s) ? Number(s) : s
n = ((n || n == 0) && n > -1 && n <= 20) ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse();
var r = s.split(".")[1];
var t = "";
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
if (n > 0) {
r = '.' + r
} else if (n == 0) {
r = ''
}
let returnT = t.split("").reverse().join("") + r;
//负数处理
if (returnT[0] == '-' && returnT[1] == ',') {
returnT = '-' + returnT.substring(2)
}
return returnT;
},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将千分位字符串转为纯数字即可。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66290.html
