InputNumberRange组件

<template>
  <div class="InputNumberRange" :class="{ 'is-disabled': disabled }">
    <div class="flex">
      <div class="from">
        <el-input
          v-model="inputFrom"
          :disabled="disabled"
          placeholder="最小值"
          @change="handleFromChange"
        ></el-input>
      </div>
      <div class="center">-</div>
      <div class="to">
        <el-input
          v-model="inputTo"
          :disabled="disabled"
          placeholder="最大值"
          @change="handleToChange"
        ></el-input>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "InputNumberRange",
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    precision: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    value(value) {
      if (Array.isArray(value)) {
        this.inputFrom = typeof value[0] == "number" ? value[0] : null;
        this.inputTo = typeof value[1] == "number" ? value[1] : null;
      }
    },
  },
  data() {
    return {
      inputFrom: null,
      inputTo: null,
    };
  },
  methods: {
    isNull(value) {
      return [null, undefined, ""].includes(value);
    },
    toPrecision(num, precision) {
      if (!precision) {
        precision = 0;
      }
      return parseFloat(
        Math.random(num * Math.pow(10, precision)) / Math.pow(10, precision)
      );
    },
    setPrecisionValue(value) {
      if (this.isNull(value)) return null;
      if (isNaN(Number(value))) return null;
      return this.toPrecision(value, this.precision);
    },
    handleFromChange(value) {
      const newVal = this.setPrecisionValue(value);
      this.inputFrom = newVal;
      this.inputTo = this.setPrecisionValue(this.inputTo);
      if (this.isNull(this.inputFrom) && this.isNull(this.inputTo)) {
        this.$emit("input", []);
        return;
      }
      if (!this.isNull(this.inputTo)) {
        this.inputFrom =
          this.isNull(newVal) || parseFloat(newVal) <= parseFloat(this.inputTo)
            ? newVal
            : this.inputTo;
      }
      this.$emit("input", [this.inputFrom, this.inputTo]);
    },
    handleToChange(value) {
      const newVal = this.setPrecisionValue(value);
      this.inputTo = newVal;
      this.inputFrom = this.setPrecisionValue(this.inputFrom);
      if (this.isNull(this.inputFrom) && this.isNull(this.inputTo)) {
        this.$emit("input", []);
        return;
      }
      if (!this.isNull(this.inputFrom)) {
        this.inputTo =
          this.isNull(newVal) ||
          parseFloat(newVal) >= parseFloat(this.inputFrom)
            ? newVal
            : this.inputFrom;
      }
      this.$emit("input", [this.inputFrom, this.inputTo]);
    },
  },
};
</script>

<style lang="scss" scoped>
.InputNumberRange {
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.flex {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  .center {
    margin: 0 3px;
  }
}
.is-disabled {
  background: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>