封装一个只能输入1-100数字的el-input组件

<template>
  <el-input
    :value="value"
    :placeholder="placeholder"
    :style="styles"
    @input="handleInput"
    @blur="handleBlur"
  >
    <template slot="prepend">
      <slot name="prepend" />
    </template>
    <template slot="append">
      <slot name="append" />
    </template>
    <template slot="prefix">
      <slot name="prefix" />
    </template>
    <template slot="suffix">
      <slot name="suffix" />
    </template>
  </el-input>
</template>
<script>
export default {
  name: "NumberFormatInput",
  components: {},
  props: {
    placeholder: {
      type: String,
      default: "请输入"
    },
    value: {
      type: [Number, String],
      default: null
    },
    styles: {
      type: String,
      default: ""
    }
  },
  emits: ["on-change"],
  data() {
    return {
      input: ""
    };
  },
  computed: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {
    handleInput(value) {
      value = value.replace(/[^\d.]/g, "");
      value = value.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      value = value.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 保证.只出现一次，而不能出现两次以上
      this.$emit("input", value);
    },
    handleBlur(e) {
      if (!e.target.value) return;
      let value = e.target.value;
      // eslint-disable-next-line no-nested-ternary
      value = value > 100 ? 100 : value < 0 ? 0 : value;
      value = parseInt(value, 10);
      this.$emit("input", value);
      this.$emit("on-change");
    }
  }
};
</script>
<style lang="scss" scoped></style>