更改样式 active v-autocomplete

Posted 2023-03-16

【中文标题】更改样式 active v-autocomplete

【英文标题】：Change style 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>

【参考方案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链接

【讨论】：

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