基于el-input封装：只能输入0~100正整数，输入负数自动置为0，输入大于100自动置为100

<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
      value = value > 100 ? 100 : value < 0 ? 0 : value
      value = parseInt(value)
      this.$emit('input', value)
      this.$emit('on-change')
    }
  }
}
</script>
<style lang="scss" scoped></style>