vue 输入框 限定输入金额的范围并且用千分符显示,初始值有格式限制

为了避免代码的耦合,利于后期维护,尽量将功能函数分开来写。
首先是千分符转化
comdify(n) {
let re = /\d{1,3}(?=(\d{3})+$)/g;
let n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {
return s1.replace(re, "$&,") + s2;
});
return n1;
}

将千分符格式的金额数字转化成普通格式的数字
delcommafy(num){//去除千分位中的‘,’
num = num.toString();
num = num.replace(/,/gi, '');
return num;
}

input框增加@blur事件 触发格式化函数
minValue 限制输入框的最小金额 ,代表<=
maxValue 限制输入框的最大金额,代表>=
names 每个输入框传入值的名字 例如 v-model=’amount’
callback 此回调函数需要传入Boolean值,如果是true代表需要将此input框内的值,进行千分符转换,如果是false,则代表不需要进行转换 ,直接return 返回即可。
小提示:methods里边的函数,因为this的指向都是vue挂载的实例。所以避免使用箭头函数,因为箭头函数会改变this。详细请 (参照阮一峰的js标准教程
` show_number(minValue, maxValue, names, callback){
if (names == ‘amount’) {
if (!this.items.amount || parseFloat(this.items.amount) == ‘0’) {
loadingTip.show(‘请输入要求范围的金额’, 1000)
this.items.amount = ”;
return;
}
} else {
if (!this.items[names] || parseFloat(this.items[names]) == ‘0’) {
this.items[names] = ‘0.00’;
return;
}
}
if (this.items[names] && parseFloat(this.items[names]) != ‘0’) {
if (!isNaN(parseFloat(this.delcommafy(this.items[names])))) {
let itemValue = parseFloat(this.delcommafy(this.items[names]));
console.log(this.delcommafy(this.items[names]))
if (itemValue >= minValue && itemValue <= maxValue) {
this.items[names] = Number(this.items[names]).toFixed(2);
if (callback) {
this.items[names] = this.comdify(Number(itemValue).toFixed(2));
}
} else {
loadingTip.show(‘请输入要求范围的金额’, 1000);
this.items[names] = ”;
return;
}
} else {
loadingTip.show(‘请输入正确的金额’, 1000);
this.items[names] = ”;
return;
}
}

} `

关于函数内部使用 中间值进行存储并转化,原因是:在input框输入内容后,@blur事件触发后,会对内容进行格式化,并填到相应的输入框中。注意 因为输入框内容进行改变之后,又会触发input的blur事件,此时取到的值是输入框的值(经过千分符转换的值)。在进行转换过程中,会转换成NaN.所以使用中间值itemValue 将第一次进行转换的值进行存储,利用转换这个中间值对input框进行比较。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值