InputCurrencyMin.vue

<template>
  <el-input
    :id="id"
    ref="form-item"
    class="m-input-currency"
    v-model="model"
    v-bind="$attrs"
    v-on="$listeners"
    v-bind:disabled="isDisable"
    @blur="onBlur"
    @focus="focus"
  />
</template>

<script>
import BigNumber from "./bignumber";
export default {
  props: {
    value: {
      type: [String, Number],
      default: undefined
    },
    currency: {
      type: String,
      default: "ZH"
    },
    precision: {
      type: Number,
      default: 2
    },
    max: {
      type: [Number, String],
      default: Infinity
    },
    min: {
      type: [Number, String],
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isOnBlur: true
    };
  },
  computed: {
    model: {
      get() {
        return this.formatCurrency(this.value);
      },
      set(newVal) {
        this.$emit("input", this.formatValue(newVal));
      }
    },
    mode() {
      return this.$store.state.Status.mode;
    },
    highlight() {
      return this.$store.state.Status.highlights.indexOf(this.id) !== -1;
    },
    isDisable: {
      get() {
        return this.mode === "display" || this.disabled;
      }
    }
  },
  methods: {
    onBlur() {
      this.isOnBlur = true;
    },
    focus() {
      this.isOnBlur = false;
    },
    formatCurrency(value) {
      let max = this.max.toString();
      let min = this.min.toString();
      if (
        this.value !== null &&
        this.value !== undefined &&
        this.value.toString
      ) {
        if (this.isOnBlur) {
          value = this.formatValue(value.toString());
          if (value === "" || value === "-") {
            this.model = "";
            return "";
          }
          let valueNum = new BigNumber(value);
          let maxNum = new BigNumber(max);
          let minNum = new BigNumber(min);

          if (valueNum.comparedTo(maxNum) == 1) {
            value = max;
          }
          if (valueNum.comparedTo(minNum) == -1) {
            value = min;
          }
          let sign = true;
          let array = [];
          if (value[0] == "-") {
            sign = false;
            array = value.slice(1).split(".");
          } else {
            array = value.split(".");
          }
          // 增加逗号
          var temp = "";
          while (array[0].length > 3) {
            temp =
              "," +
              array[0].substring(array[0].length - 3, array[0].length) +
              temp;
            array[0] = array[0].substring(0, array[0].length - 3);
          }
          temp = array[0] + temp;
          if (this.currency === "392" || this.currency === "JPY") {
            this.model = sign ? temp : "-" + temp;
            return sign ? temp : "-" + temp;
          }
          if (this.precision <= 0) {
            temp = temp;
          } else if (array.length === 1) {
            // 没有小数位数，补全 0
            temp += ".";
            // if (this.precision)
            for (var i = 0; i < this.precision; i++) {
              temp += "0";
            }
          } else if (array[1].length < this.precision) {
            temp += "." + array[1];
            // 精度不足补全 0
            for (var i = array[1].length; i < this.precision; i++) {
              temp += "0";
            }
          } else {
            temp += "." + array[1].substring(0, this.precision);
          }
          this.model = sign ? temp : "-" + temp;
          return sign ? temp : "-" + temp;
        } else {
          return this.formatValue(value);
        }
      }
      return this.value;
    },
    formatValue(value) {
      if (value !== null && value !== undefined && value.toString) {
        var temp = value
          .toString()
          .split(",")
          .join("");
        // 取出正负符号
        let sign = true;
        if (temp[0] == "-") {
          sign = false;
          temp = temp.slice(1);
        }
        // 以小数点开头的前面加 0
        if (temp.charAt(0) === ".") temp = "0" + temp;
        // 以0 为开头且后面不是小数点的去掉前面的 0
        if (temp.charAt(0) === "0" && temp.length > 1 && temp.charAt(1) !== ".")
          temp = temp.substring(1);
        // 日元只保留前面的数字
        if (this.currency === "392" || this.currency === "JPY") {
          var i = 0;
          while (i < temp.length) {
            if (!(temp.charAt(i) >= "0" && temp.charAt(i) <= "9")) break;
            i++;
          }
          temp = temp.substring(0, i);
        } else {
          // 其他币种取出前面整数和小数部分
          var i = 0;
          while (i < temp.length) {
            if (
              !(
                (temp.charAt(i) >= "0" && temp.charAt(i) <= "9") ||
                temp.charAt(i) === "."
              )
            )
              break;
            i++;
          }
          temp = temp.substring(0, i);
          var array = temp.split(".");
          if (this.precision <= 0) {
            temp = array[0];
          } else if (array.length > 1 && array[1].length > 0) {
            temp = array[0] + "." + array[1].substring(0, this.precision);
          } else if (array.length > 1 && array[1].length === 0) {
            temp = array[0] + "."; // 原来有小数点的地方也保留小数
          } else {
            temp = array[0];
          }
        }
        return sign ? temp : "-" + temp;
      }
      return value;
    }
  }
};
</script>

<style>
/* .el-input.highlight .el-input__inner{
  border-color: red;
} */
.el-input.m-input-currency .el-input__inner {
  text-align: right;
}
</style>