如何在Vuetify 3的v-text-field中使用Maska输入掩码？

问题根源在于 Vuetify 的 v-text-field 是封装后的组件，直接将 v-maska 指令绑定在组件上时，Maska 无法找到底层的原生 <input> 元素，导致掩码失效。以下提供两种可行的解决方法：

方法一：使用 Maska 组合式 API（推荐） #

利用 Vue 3 的组合式 API 直接处理输入值，无需依赖指令，适配性更强：

<template>
  <v-text-field
    label="Телефон"
    variant="solo"
    class="mt-3"
    clearable
    v-model="form.phone"
    @update:model-value="handlePhoneInput"
    :error-messages="v$.form.phone.$errors.map(e => e.$message)"  
  ></v-text-field>
</template>

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

const form = ref({ phone: '' })
// 初始化掩码规则
const { mask } = useMaska({ mask: '+7(###)-###-##-##' })

// 处理输入值，自动应用掩码
const handlePhoneInput = (rawValue) => {
  form.value.phone = mask(rawValue)
}
</script>

方法二：通过 Ref 获取原生 Input 手动绑定掩码 #

如果偏好使用指令或手动初始化的方式，可以通过组件的 Ref 获取底层原生输入元素，再绑定 Maska：

<template>
  <v-text-field
    ref="phoneField"
    label="Телефон"
    variant="solo"
    class="mt-3"
    clearable
    v-model="form.phone"
    :error-messages="v$.form.phone.$errors.map(e => e.$message)"  
  ></v-text-field>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { applyMask } from 'maska'

const form = ref({ phone: '' })
const phoneField = ref(null)

onMounted(() => {
  // 定位到 v-text-field 内部的原生 input 元素
  const inputEl = phoneField.value.$el.querySelector('input')
  if (inputEl) {
    // 为原生 input 应用掩码规则
    applyMask(inputEl, { mask: '+7(###)-###-##-##' })
  }
})
</script>

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