Vuetify 自动完成菜单/芯片样式的下拉菜单

Question

我想更改自动完成框下拉菜单中项目的样式。 Vuetify-Autocomplete

目前它显示每个项目的标准样式： Current

<v-autocomplete
chips
deletable-chips
multiple
v-model="selectedTags"
:items="tags"
></v-autocomplete>

但我希望它像这样显示筹码项目样式：

Chips-Style

如果可能，甚至可以为每个标签使用特定的颜色。我目前在 Table 中使用正常的“v-chip”组件显示它们，效果很好！ Table with colored chips

我尝试对 CSS 和每次都会导致错误的 V-autocomplete 组件进行一些修补。

我试图找到类似

的内容

:menu-props="{
nudgeBottom: 15 + 'px',
zIndex: 2,
allowOverflow,
rounded: 'xl'      // <-- Here ✅
}"

显示在本期中。但是对于 Menu 里面的 Props/Items 而不是 Menu.

另一个解决方案是自己做一个不使用下拉列表的版本，我只是检查字符串是否包含在我的 Chip-List 中的一个 Chip 中，并将它们显示在 Searchbar 下方.但是我需要拒绝自动完成的一些很酷的功能。

我还不能添加图片，因为我太新了。抱歉！

我希望我包含了所有信息。

Answer 1

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-70189718-eqwgl?file=/src/components/AutoChips.vue

一些 vuetify 组件有一个叫做 slots 的东西，你可以根据自己的需要自定义，如果 v-autocomplete 有一个 item 插槽，可以自定义显示的项目列表。您需要做的就是为列表中的项目创建一个自定义模板。

<v-autocomplete
   v-model="values"
   :items="items"
   chips
   deletable-chips
   multiple
   label="Autocomplete custom items"
>
   <template v-slot:item="{ item, on, attrs }">
      <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
         <v-list-item-action>
            <v-checkbox :color="getChipColor(item)" :input-value="active"></v-checkbox>
         </v-list-item-action>
         <v-list-item-content>
            <v-list-item-title>                      
               <v-chip dark :color="getChipColor(item)"> {{ item }} </v-chip>
            </v-list-item-title>
         </v-list-item-content>
      </v-list-item>
   </template>
</v-autocomplete>

您可以通过创建一个简单的方法并传递项目值来为每个 v-chip 设置自定义颜色。

getChipColor(item) {
   switch (item) {
      case 'foo':
         return 'red darken-2' 
      case 'bar':
         return 'green darken-2' 
      case 'fizz':
         return 'orange darken-2' 
      case 'buzz':
         return 'purple darken-2'          
      default:
         return 'grey lighten-2'
   }
}

如果您也想自定义所选芯片，只需修改 selection 插槽即可。您可以在其 API 文档页面上查看 v-autocomplete 的所有可用插槽。 https://vuetifyjs.com/en/api/v-autocomplete/#slots

Vuetify 自动完成菜单/芯片样式的下拉菜单

Vuetify Autocomplete Menu / Dropdown in chips style

javascript

css

autocomplete

vue.js

vuetify.js