vue + element-input封装数字框

川长思鸟来 2021-09-25 02:34 266阅读 0赞

因业务需要，要求一个数字框，现有的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>