封装el-input组件，限制输入为数值类型（vue）

封装组件

<template>
  <el-input
    v-bind="$attrs"
    v-on="$listeners"
    v-model="inputVal"
    @input.native="inputHandle($event, isInteger, isZero, decimalCount)"
  ></el-input>
</template>

<script>
export default {
  name: "InputNumber",
  inheritAttrs: false,
  props: {
    // 输入框的值
    fieldValue: {
      default: "",
    },
    // 是否为整数
    isInteger: {
      type: Boolean,
      default: true,
    },
    // 整数是否含0
    isZero: {
      type: Boolean,
      default: true,
    },
    // 为浮点数时保留的小数位
    decimalCount: {
      type: Number,
      default: 2,
    },
    // 每次输入后的回调
    callback: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      inputVal: "",
      originVal: "",
    };
  },
  watch: {
    // 监听外部值的改变
    fieldValue: {
      handler(val) {
        this.originVal = this.inputVal = val;
      },
      immediate: true,
    },
  },
  methods: {
    inputHandle(e, isInteger, isZero, decimalCount) {
      // 输入框为空时
      if (e.target.value === "") {
        this.originVal = "";
        this.$emit("update:fieldValue", "");
        if (this.callback) this.callback("");
        return;
      }

      let rule = /.*/;

      if (isInteger) {
        if (isZero) {
          // 整数（含0）
          rule = /^\d*$/;
        } else {
          // 整数（不含0）
          rule = /^[1-9]\d*$/;
        }
      } else {
        // 浮点 /^\d+\.?\d{0,2}$/
        rule = new RegExp(`^\\d+\\.?\\d{0,${decimalCount}}$`);
      }

      if (rule.test(e.target.value)) {
        // 符合指定规则
        if (isInteger || /^0+[^.]/.test(e.target.value)) {
          // 是否格式化一下
          this.inputVal = e.target.value = Number(e.target.value)
        }
        this.originVal = this.inputVal;
        this.$emit("update:fieldValue", this.inputVal);
        if (this.callback) this.callback(this.inputVal);
      } else {
        // 不符合指定规则，等于原来的值
        this.inputVal = e.target.value = this.originVal;
      }
    },
  },
};
</script>

使用组件

<template>
  <div class="home">
    <h1>This is an home page</h1>
    <hr />
    <InputNumber :fieldValue.sync="iptVal" />
    <p>-----{{ iptVal }}-----</p>
  </div>
</template>

<script>
import InputNumber from "@/components/mycompo/InputNumber.vue";
export default {
  name: "HomeView",
  components: {
    InputNumber,
  },
  data() {
    return {
      iptVal: "",
    };
  },
};
</script>