elementUI输入框自带校验

如何使用？根据示例复制代码

<my-input-number
              v-model="rulesIndexTable.indexValueInput"
              tip="请输入指标分值"
              :precision="2"
              :step="0.01"
              :style-is-center="false"
            />

子组件 myInputNumber.vue

默认只能输入整数
事件触发顺序：input change blur
overFlow100属性，输入小于-100为-100，大于100为100
<template>
  <div class="el-input-group w-100p" style="display: flex">
    <input
      class="el-input__inner"
      :style="{textAlign: styleIsCenter?'center':'left'}"
      :disabled="disabled"
      :value="myValue"
      :placeholder="tip"
      @input="input($event)"
      @blur="blur($event)"
      @change="change($event)"
    >
    <div v-show="icon">
      <span class="el-input-group__append" style="line-height: 30px;padding: 0 22px 0 14px">
        {{ icon }}
      </span>
    </div>
  </div>
</template>
<script>
// js精准计算——两个浮点数求和
function accAdd (num1, num2) {
  let r1, r2, m
  try {
    r1 = num1.toString().split('.')[1].length
  } catch (e) {
    r1 = 0
  }
  try {
    r2 = num2.toString().split('.')[1].length
  } catch (e) {
    r2 = 0
  }
  m = Math.pow(10, Math.max(r1, r2))
  return Math.round(num1 * m + num2 * m) / m
}

// js精准计算——两个浮点数相减
function accSub (num1, num2) {
  let r1, r2, m, n
  try {
    r1 = num1.toString().split('.')[1].length
  } catch (e) {
    r1 = 0
  }
  try {
    r2 = num2.toString().split('.')[1].length
  } catch (e) {
    r2 = 0
  }
  m = Math.pow(10, Math.max(r1, r2))
  n = (r1 >= r2) ? r1 : r2
  return (Math.round(num1 * m - num2 * m) / m).toFixed(n)
}

export default {
  name: 'SInputNumber',
  props: {
    styleIsCenter: {
      type: Boolean,
      default: true
    },
    overFlow100: {
      type: Boolean,
      default: true
    },
    value: {},
    icon: String,
    step: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    disabled: Boolean,
    controls: {
      type: Boolean,
      default: true
    },
    tip: String,
    precision: {
      type: Number,
      validator (val) {
        return val >= 0 && val === parseInt(val, 10)
      },
      default: 0
    }
  },
  computed: {
    myValue () {
      let val = this.value === null ? '' : this.value.toString()
      // 清除"数字"和"."以及"-"以外的字符
      val = val.replace(/[^\-\d.]/g, '')
      // 只保留第一个“点”号, 清除多余的
      const idx = val.indexOf('.')
      if (!(idx === -1 || idx === val.length - 1)) {
        val = val.substr(0, idx) + '.' + val.substr(idx + 1).replace(/\./g, '')
      }
      // 第一个字符如果是.号，则补充前缀0
      // val = val.replace(/^\./g, '0.')
      // 只保留首位的负号, 清除多余的
      if (val.length > 1) {
        val = val.charAt(0) + val.substr(1).replace(/-/g, '')
      }
      // 将 '-.' 替换成 '-0.'
      // val = val.replace(/^\./g, '0.').replace(/^-\./, '-0.')
      const str = '^(\\-)*(\\d+)\\.(\\d{' + this.precision + '}).*$'
      const reg = new RegExp(str)
      if (this.precision === 0) {
        // 不需要小数点
        val = val.replace(reg, '$1$2')
      } else {
        // 通过正则保留小数点后指定的位数
        val = val.replace(reg, '$1$2.$3')
      }
      if (this.overFlow100) {
        if (val > 100) {
          return 100
        }
        if (val < -100) {
          return -100
        }
      }
      this.$emit('input', val)
      return val
    }
  },
  methods: {
    increase () {
      let val = Number(this.value)
      val = accAdd(val, this.step)
      if (val < this.min) {
        val = this.min
      }
      if (val > this.max) {
        val = this.max
      }
      this.$emit('input', val)
    },
    decrease () {
      let val = Number(this.value)
      val = accSub(val, this.step)
      if (val < this.min) {
        val = this.min
      }
      if (val > this.max) {
        val = this.max
      }
      this.$emit('input', val)
    },
    blur ($event) {
      let val = Number($event.target.value).toFixed(this.precision)
      if (val < this.min) {
        val = this.min
      }
      if (val > this.max) {
        val = this.max
      }
      // 只输入负号或未输入时，默认显示最小值
      if (isNaN(val) || $event.target.value === '') {
        val = ''
      }
      this.$emit('input', val)
      this.$emit('blur', val)
    },
    input ($event) {
      this.$emit('input', $event.target.value)
    },
    change ($event) {
      this.$emit('change', $event.target.value)
    }
  }
}
</script>
<style scoped>

.el-input__inner {
  height: 32px;
  line-height: 30px;
}
</style>