整数输入框 InputNumberIntZen.vue 只能输入整数 不能输入.等其他字符

这版的输入限制堪称完美 perfect！

20230712 更新 加入 onBlurHandle 如果输入的02 失焦的时候 变成2

<!--数字输入框 只能输入数字 整型 InputNumberIntZen.vue-->
<template>
  <Input ref="inputRef"
         :clearable="clearable"
         :maxlength="maxlength"
         :placeholder="placeholder"
         v-model="innerValue"
         :disabled="disabled"
         @on-keydown="onKeyDownHandle"
         @on-blur="onBlurHandle" />
</template>

<script>
import { keyList1 } from './keyListByInputNumberIntZen'

export default {
  name: 'InputNumberIntZen',
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    },
    maxlength: {
      type: Number,
      default: 10
    },
    clearable: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data () {
    return {
      innerValue: this.value.toString(),
      keyList1
    }
  },
  watch: {
    value: function (val) {
      console.info('watch value', val)
      this.innerValue = this.value.toString()
    },
    innerValue: function (val) {
      console.info('watch innerValue', val)
      if (this.clearSpot(val) !== val) { // 有非法字符的时候 恢复光标 主要针对中文
        const diff = this.getDiff(val, this.clearSpot(val))
        console.info('diff', diff)
        this.$nextTick(() => {
          console.info('-- this.value', this.value, '-- this.innerValue', this.innerValue)
          this.innerValue = this.value
          this.$nextTick(() => {
            this.$refs.inputRef.$refs.input.setSelectionRange(diff, diff)
          })
        })
      } else {
        if (this.clearSpot(val) === val) {
          console.info('emit val', val)
          this.$emit('input', val)
          this.$emit('validateField') // 这句很重要
          // 外层需要 每次 验证一下
          // @validateField="$refs.internalTransferRef.validateField('undertakeNumber')"
        }
      }
    }
  },
  computed: {},
  methods: {
    getDiff (str1, str2) {
      let ret = 0
      for (let i = 0; i < str1.length; i++) {
        if (str1.substr(i, 1) === str2.substr(i, 1)) {
          // next
        } else {
          ret = i
          break
        }
      }
      return ret
    },
    onKeyDownHandle (e) {
      let across = this.keyList1.includes(e.keyCode)
      // 这里只能拦截非中文 中文字符 watch拦截
      if (!across) { // 只能输入整数
        e.preventDefault()
        return false
      }
    },
    clearSpot (dateStr) {
      return dateStr.replace(/[^0-9]/ig, '')
    },
    onBlurHandle () {
      if (this.innerValue === '') {
        return false
      }
      const n = Number(this.innerValue)
      if (String(n) !== this.value) {
        console.info('n', n)
        this.$emit('input', String(n))
      }
    },
  },
  created () { },
  activated () { },
  mounted () { },
  beforeDestroy () { }
}
</script>

<style>
</style>

// keyListByInputNumberIntZen.js
export const keyList1 = [
  8, // 退格键
  9, // tab
  96, // 0
  97, // 1
  98, // 2
  99, // 3
  100, // 4
  101, // 5
  102, // 6
  103, // 7
  104, // 8
  105, // 9
  // 110, // . 数字类型带点,这里是整型的 所以把点就注释掉了
  // 190, // .
  46, // del
  48, // 0
  49, // 1
  50, // 2
  51, // 3
  52, // 4
  53, // 5
  54, // 6
  55, // 7
  56, // 8
  57, // 9
  37, // left
  39 // right
]

<InputNumberIntZen v-model.trim="modalData.myInt"
                               style="width: 100px;"
                               :maxlength="2"
                               placeholder="请输入0-99 整数" />