h5上完美支持自定义输入小数点前多少位和小数点后多少位（vue）

支持

• 弹出数字键盘
• 小数点前自定义最多输入几位（默认11位）
• 小数点后自定义最多输入几位（默认4位）
• 若是设置小数点后为0位，则不容许输入小数点
• 解决IOS弹出系统键盘收起后，页面不恢复

<template>
  <input
    ref="number"
    @input="input"
    :placeholder="placeholder"
    :value="value"
    @blur="blur"
    type="number">
</template>
<script>

export default {
  props: {
    value: { // 设置值
      default: '',
      type: null
    },
    integerDigits: { // 小数点前几位
      default: 11,
      type: Number
    },
    decimalDigits: { // 小数点后几位
      default: 4,
      type: Number
    },
    placeholder: { // 设置默认值
      default: '',
      type: String
    }
  },
  data () {
    return {
      oldValue: this.value,
      isDel: false, // 是不是删除操做
      isDot: false // 是不是小数点输入操做
    }
  },
  computed: {
  },
  components: {
  },
  created () {

  },
  methods: {
    input (event) {
      this.isDel = false
      this.isDot = false
      if (event.data === null) this.isDel = true
      if (event.data === '.') this.isDot = true

      let reg
      if (this.decimalDigits > 0) {
        reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}}(\\.\\d{0,${this.decimalDigits}})?)?$`, 'g')
      } else {
        reg = new RegExp(`(?!^0\\d)^(\\d{1,${this.integerDigits}})?$`, 'g')
      }

      if (reg.test(event.target.value)) {
        if (event.target.value !== '' || this.isDel) { // 若是不是由于后退，让值变空，就不改变旧值
          this.oldValue = event.target.value
        }
      }
      if (this.isDot) {
        if ((event.target.value && /\./g.test(event.target.value)) || this.decimalDigits === 0) {
          event.target.value = null // 多余的.强制刷新
        }
      }
      event.target.value = this.oldValue
      this.$emit('input', this.oldValue)
    },
    blur () {
      this.resolveBug()
    },
    resolveBug(){
      clearTimeout(this.timer)
      this.timer=setTimeout(function(){
        if(document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA'){
          return
        }
        let result = 'pc';
        if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
          result = 'ios'
        }else if(/(Android)/i.test(navigator.userAgent)) {  // 判断Android
          result = 'android'
        }
        if(result === 'ios' ){
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      },10)
    }
  }
}
</script>

<style scoped>
</style>

使用方式

<NumberInput
   :integerDigits="4"
   :decimalDigits="2"
   class="input"
   v-model="value"/>

解决点：

• 不容许输入相似于 "0666", "0006"
• 不容许输入多余的 ".", 如输入 "3.02."

备注：若是对你有帮助，请帮忙点个赞