使用 TypeScript 限制 Vue 中的数字输入值

Question

I have the following component:

<input class="number-input py-1 primary--text font-weight-regular"
        :ref="'number-input-' + title"
        @keypress="onKeyPressed"
        :disabled="disabled"
        type="number"
        v-model="result"
        :min="minimum"
        :max="maximum"
      />

import { Component, Prop, Vue } from 'vue-property-decorator'
import { floatFixedNumber } from '@/common/utils'

@Component({
  name: 'NumberInput'
})
export default class NumberInput extends Vue {
  @Prop({ type: String }) title!: string | null
  @Prop({ type: Number }) value!: number
  @Prop({ type: Boolean, default: false }) focused!: boolean
  @Prop({ type: Number, default: 0 }) minAllowed!: number
  @Prop({ type: Number, default: 999 }) maxAllowed!: number
  @Prop({ type: Boolean, default: false }) disabled!: boolean

  get result (): number {
    return this.validateValue(this.value)
  }

  set result (value: number) {
    if (!this.disabled) {
      this.$emit('on-change', this.validateValue(value))
    }
  }

  get minimum (): number {
    return this.minAllowed === null ? 0 : this.minAllowed
  }

  get maximum (): number {
    return this.maxAllowed === null ? 999 : this.maxAllowed
  }

  onKeyPressed () {
    this.$nextTick(() => {
      this.$forceUpdate()
    })
  }

  validateValue (value: string | number | null): number {
    value = Number(value)
    value = isNaN(value) ? 0 : value
    value = value < this.minimum ? this.minimum : value > this.maximum ? this.maximum : value
    return floatFixedNumber(value)
  }

  mounted () {
    if (this.focused && this.$refs['number-input-' + this.title]) {
      (this.$refs['number-input-' + this.title] as HTMLElement).focus()
    }
  }
}

What I want is to set maximum allowed typed number to 999. With the code above, it does set the number, however in the input field I can still type 9999, even if the max number is set to 999.

I already tried the following:

get result (): number {
    const num = this.validateValue(this.value) > this.maximum ? this.maximum : this.validateValue(this.value)
    return num
  }

onKeyPressed (event:any) {
    const val = this.validateValue(event?.target.value)
    if (val > this.maximum) {
      this.result = this.maximum
    } else {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  }

And I tried this:

onKeyPressed (event:any) {
    const val = this.validateValue(event?.target.value)
    if (val > this.maximum) {
      (this.$refs['number-input-' + this.title] as HTMLInputElement).value = this.maximum.toString()
    } else {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  }

However the user is still being able to type 9999 in the field, even though it counts only 999. How do I prevent this and allow him to type (or to see in the input field) only up to 999?

Answer 1

 <input class="number-input py-1 primary--text font-weight-regular":ref="'number-input-' + title" @keydown="onKeyPressed($event)":disabled="disabled" type="number" v-model="result":min="minimum":max="maximum" /> onKeyPressed: (e: KeyboardEvent) => { const el: HTMLInputElement = (e.target as HTMLInputElement)?? null; if (el && el.value.length > 3) { e.preventDefault(); } };