更改样式 active v-autocomplete答案

【问题标题】：Change style active v-autocomplete更改样式 active v-autocomplete
【发布时间】：2021-10-03 02:04:20
【问题描述】：

如果至少选择了一项，我如何更改 v-autocomplete 的样式（边框颜色）？如果焦点在字段上，现在样式会更改（蓝色），但如果选择项目且焦点不在字段上，则变为默认（灰色）。移除焦点后我需要保持蓝色边框我尝试更改 css 但没有成功

.v-label .v-label--active .theme--light {
  color: green  !important;
  border: 1px solid red !important;
}

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>
 <template v-slot:selection="{ item, index }">
    <v-chip text-color="grey darken-4" class="indigo lighten-5">
      <span>{{ item }}</span>
    </v-chip>
  </template> 
</v-autocomplete>

【问题讨论】：

标签： javascript css v-autocomplete vuetifyjs3

【解决方案1】：

不需要额外的 CSS。您可以将类添加为 Vue class binding:

:class="{'v-input--is-focused primary--text' : filtered.length}"

使用v-input--is-focused primary--text 类就足够了，所以你的自动完成看起来像：

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  :class="{'v-input--is-focused primary--text' : filtered.length}"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>

此代码只是检查 filtered 数组中是否存在任何项目。

【讨论】：

【解决方案2】：

它有类“v-input--is-dirty”。尝试在css中使用，比如

.theme--light.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:before {
    border-color: red;
}

【讨论】：

.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:after { transform: scaleX(1);颜色：#1867c0 ！重要； }

【解决方案3】：

在您的自定义选择模板上，您可以访问选定的参数，然后添加一个自定义类（如果它是真的）

<template v-slot:selection="{ item, index, selected }">
  <v-chip 
   text-color="grey darken-4" 
   class="indigo lighten-5" 
   :class=" selected ? 'customActiveClass' : '' "
  >
    <span>{{ item }}</span>
  </v-chip>
</template>

这是v-autocompletehttps://vuetifyjs.com/en/api/v-autocomplete/#api-slots的vuetify doc链接

【讨论】：

这样我可以改变项目的风格，但我需要改变盒子和标签的风格