欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

elementUI输入框自带校验

程序员文章站 2022-06-07 15:40:09
...

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

<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>