如何修改v-autocomplete元素字体大小及解决模板交互/图标样式问题

一、修复自定义模板的选择与菜单关闭问题 #

自定义item插槽时，不能直接绑定自定义@click事件，需要复用原组件提供的select方法，这样才能触发选择逻辑并自动关闭菜单：

<v-autocomplete
  v-model="countryCode"
  :items="countryCodeItems"
  variant="outlined"
>
  <template v-slot:item="{ item, select }">
    <v-list-item @click="select(item)">
      <v-list-item-title style="font-size: 1.7rem">{{ item.title }}</v-list-item-title>
    </v-list-item>
  </template>
</v-autocomplete>

更简洁的写法：直接将select方法绑定到点击事件，无需手动传参：

<template v-slot:item="{ item, select }">
  <v-list-item @click="select">
    <v-list-item-title style="font-size: 1.7rem">{{ item.title }}</v-list-item-title>
  </v-list-item>
</template>

二、无需自定义模板，直接修改标题字体大小 #

如果不想自定义插槽，用CSS深度选择器直接覆盖组件内部样式即可：

/* 单文件组件的<style>标签内 */
::v-deep .v-autocomplete .v-list-item-title {
  font-size: 1.7rem;
}

三、修改无边框（outlined）模式下的图标颜色 #

方法1：通过CSS变量直接设置 #

<v-autocomplete
  v-model="countryCode"
  :items="countryCodeItems"
  variant="outlined"
  style="--v-input-icon-color: #你的目标颜色;"
>
</v-autocomplete>

方法2：深度选择器覆盖样式 #

::v-deep .v-autocomplete.v-input--outlined .v-icon {
  color: #你的目标颜色;
}

方法3：全局主题配置（适用于全项目统一修改） #

// vuetify配置文件
export default createVuetify({
  theme: {
    variables: {
      inputIconColor: '#你的目标颜色',
    },
  },
})

内容的提问来源于stack exchange，提问作者לירן ייני