一、 html
<van-field
class="extra-color"
v-model="dataForm.externalPrice"
label="外部服务费"
type="number"
:formatter="formatter"
format-trigger="onBlur"
placeholder="请输入外部服务费"
input-align="right"
/>
二、 JS部分
1. watch监听
watch: {
"dataForm.externalPrice": function (newVal, oldVal) {
if (newVal < 0) {
this.$toast("输⼊⾦额不能为负数!");
this.dataForm.externalPrice = "";
}
// 解决数字键盘可以输⼊输⼊多个⼩数点问题
if (newVal === "" && oldVal && oldVal.toString().indexOf(".") > 0) {
this.dataForm.externalPrice = oldVal;
return;
}
// 保留两位⼩数
if (newVal) {
newVal = newVal.toString();
var pointIndex = newVal.indexOf(".");
if (pointIndex > 0 && newVal.length - pointIndex > 3) {
this.dataForm.externalPrice = oldVal;
return;
}
}
},
},
2. 强制控制有两位小数
// 强制保留两位小数方法
formatter(val) {
// Math.abs返回数的绝对值
let sign = val == (val = Math.abs(val));
// Math.floor向下取整
val = Math.floor(val * 100 + 0.50000000001);
let cents = val % 100;
val = Math.floor(val / 100).toString();
if (cents < 10) {
cents = "0" + cents;
}
for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
val =
val.substring(0, val.length - (4 * i + 3)) +
"," +
val.substring(val.length - (4 * i + 3));
}
return (sign ? "" : "-") + val + "." + cents;
},