如何设置Vuetify的<v-otp-input>仅接受数字输入

这里有几个实用的方法可以实现需求，解决官网无明确说明的问题：

方法1：利用原生HTML属性限制输入 #

<v-otp-input>支持透传原生input属性，你可以直接设置input-mode="numeric"和pattern="[0-9]*"，搭配type="tel"还能让移动端弹出数字键盘，提升输入体验。不过这种方式在桌面端仍可能允许输入非数字（比如通过键盘输入字母），适合作为基础限制：

<v-otp-input
  v-model="otpCode"
  input-mode="numeric"
  pattern="[0-9]*"
  type="tel"
></v-otp-input>

方法2：通过输入事件拦截过滤非数字 #

监听组件的@input事件，手动过滤掉所有非数字字符，确保绑定的v-model始终是纯数字内容，这种方式能彻底拦截非数字输入：

<template>
  <v-otp-input
    v-model="otpCode"
    @input="filterNonNumeric"
  ></v-otp-input>
</template>

<script setup>
import { ref } from 'vue'

const otpCode = ref('')

const filterNonNumeric = () => {
  // 替换所有非数字字符为空
  otpCode.value = otpCode.value.replace(/[^0-9]/g, '')
}
</script>

方法3：结合两种方式（推荐） #

把原生属性和事件拦截结合起来，既优化移动端输入体验，又能彻底过滤非数字内容，覆盖所有场景：

<template>
  <v-otp-input
    v-model="otpCode"
    input-mode="numeric"
    pattern="[0-9]*"
    type="tel"
    @input="filterNonNumeric"
  ></v-otp-input>
</template>

<script setup>
import { ref } from 'vue'

const otpCode = ref('')

const filterNonNumeric = () => {
  otpCode.value = otpCode.value.replace(/[^0-9]/g, '')
}
</script>

注意：如果使用Vue 2，只需调整script部分为选项式API即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者YUN0814