Vuetify如何为v-text-field组件内部原生<input>元素添加自定义CSS类

解决方案 #

根据你使用的Vuetify版本选择对应写法即可：

1. Vuetify 2.x 版本

直接使用v-text-field内置的input-class属性绑定目标类名：

<v-text-field
  v-model="item.customer.mail"
  type="email"
  :rules="emailRules"
  hide-details="auto"
  input-class="ym-record-keys"
  solo 
>
</v-text-field>

这个属性是Vuetify专门提供用来给内部原生<input>元素追加CSS类的，不会挂载到外层根节点。

2. Vuetify 3.x 版本

3.x版本调整了属性传递规则，需要通过input-props配置项传递类名：

<v-text-field
  v-model="item.customer.mail"
  type="email"
  :rules="emailRules"
  hide-details="auto"
  :input-props="{ class: 'ym-record-keys' }"
  solo 
>
</v-text-field>

兼容 fallback 方案

如果遇到特殊场景官方prop不生效，可以通过ref手动操作DOM追加类：
首先给组件添加ref标识：

<v-text-field
  ref="emailInput"
  v-model="item.customer.mail"
  type="email"
  :rules="emailRules"
  hide-details="auto"
  solo 
>
</v-text-field>

然后在组件挂载完成的生命周期钩子中操作：

// Vue 2 写法
mounted() {
  this.$refs.emailInput.$el.querySelector('input').classList.add('ym-record-keys')
}

// Vue 3 组合式API写法
import { ref, onMounted } from 'vue'
const emailInput = ref(null)
onMounted(() => {
  emailInput.value.$el.querySelector('input').classList.add('ym-record-keys')
})

你之前直接给组件加class不生效是因为Vue组件的根class默认只会挂载到组件的最外层DOM节点上，Vuetify的表单组件内部做了多层结构封装，所以需要用专门的属性传递内部元素的配置。

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