更改样式 active v-autocomplete

Question

如果至少选择了一项，我如何更改 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>

Answer 1

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

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

Answer 2

在您的自定义选择模板上，您可以访问所选参数，然后只需添加一个自定义 class 是否正确

<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-autocomplete https://vuetifyjs.com/en/api/v-autocomplete/#api-slots

的 vuetify 文档的 link

Answer 3

不需要额外的 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 数组中是否存在任何项目。

更改样式 active v-autocomplete

Change style active v-autocomplete

javascript

css

v-autocomplete

vuetifyjs3