vue + element-input封装数字框

因业务需要，要求一个数字框，现有的element的input不太符合要求，遂动手封装了一个，封装后仍能调用原<el-input>事件。

功能：仅能输入合法整数和小数格式，默认最少保留二位小数，最大保留四位小数，支持负数格式，支持禁用

使用：

<my-input-number :value.sync="value"/>

采用了vue的.sync修饰符，其余功能属性在代码中有详细注释，上代码。

<template>
  <el-input class="group-inp"
            :disabled="disabled"
            :value="value"
            @blur="handleNumBlur"
            @input="handleNumInput"
            @change="handleNumChange"
  />
</template>

<script>
/**
 * <el-input>框自动校验,仅能填入数字，支持负数格式
 * 过滤规则: 仅能输入合法整数和小数格式 默认最少保留二位小数，最大保留四位小数 如：1，1.2345
 * 示例：<my-input-number :value.sync="value"/>
 * @author LiuDaShun
 */
export default {
  name: 'MyInputNumber',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大保留小数位数
    fixMax: {
      type: Number,
      default: 4
    },
    // 最小保留小数位数
    fixMin: {
      type: Number,
      default: 2
    },
    // 负数支持
    sign: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleNumInput (value) {
      // 替换掉除数字和小数点的其余字符及多个小数点的输入，过滤规则：仅能输入任意数字和至多一个小数点
      let val = value + ''
      val = val.replace(/。/g, '.') // 消除中文下不能输入.的问题
      // 负数支持
      let sign = this.sign && /^-/.test(val) ? '-' : ''
      val = val.replace(/[^\d.]/g, '')
      val = val.split('.').length > 2 ? val.replace(/\.$/, '') : val
      val = sign + val

      this.$emit('input', val)
      this.$emit('update:value', val)
    },
    handleNumChange (value) {
      // 替换掉 '0.' '.123' '.' '0123' 不规则输入，四舍五入保留小数位数，过滤规则: 仅能输入合法整数和小数格式 如：1 ，1.2345
      let val = value + ''
      // 负数支持
      let sign = this.sign && /^-/.test(val) ? '-' : ''
      val = val.replace(/-/, '')
      val = !val.split('.')[0] || !val.split('.')[1] ? val.replace(/\./g, '') : val
      if (val.split('.')[1]) {
        // 小数
        if (val.split('.')[1].length < this.fixMin) {
          let f = 10 ** this.fixMin
          val = (Math.round(Number(val) * f) / f).toFixed(this.fixMin)
        } else if (val.split('.')[1].length > this.fixMax) {
          let f = 10 ** this.fixMax
          val = (Math.round(Number(val) * f) / f).toFixed(this.fixMax)
        }
        val = sign + val
      } else {
        // 整数
        val = val === '' ? '' : sign + Number(val).toFixed(this.fixMin)
      }

      this.$emit('change', val)
      this.$emit('update:value', val)
    },
    handleNumBlur (event) {
      this.$emit('blur', event)
    }
  }
}
</script>

<style scoped>

</style>