van-field输入数字失焦后强制保留两位小数

一、 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;
    },