0

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

4

3 回答 3

1

不需要额外的 CSS。您可以将类添加为 Vue类绑定：

: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数组中是否存在任何项目。

于 2021-07-27T15:36:13.990 回答
0

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

.theme--light.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:before {
    border-color: red;
}
于 2021-07-27T09:25:51.827 回答
0

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

<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 文档链接

于 2021-07-27T09:26:40.437 回答