0
621
VistasMenú de Autocompletar Vuetify / Desplegable en estilo chips
Quiero cambiar el Estilo de los Elementos en el Menú desplegable de mi Caja de Autocompletar. Vuetify-Autocompletar
Actualmente muestra el Estilo estándar para cada Elemento: Actual
<v-autocomplete chips deletable-chips multiple v-model="selectedTags" :items="tags" ></v-autocomplete>Pero quiero que muestre chips Items-Style como este:
A ser posible incluso con colores específicos para cada Tag. Actualmente los estoy mostrando en una tabla con el componente normal "v-chip" que funciona muy bien. Mesa con fichas de colores
Traté de jugar un poco con CSS y con el componente V-autocompletar que resultó en errores cada vez.
Traté de encontrar algo como
:menu-props="{ nudgeBottom: 15 + 'px', zIndex: 2, allowOverflow, rounded: 'xl' // <-- Here ✅ }"que se muestra en este problema StackoverflowIssue . Pero para los accesorios/elementos dentro del menú en lugar del menú.
La otra solución sería hacer una versión de bricolaje que no use el menú desplegable y simplemente verifico si la cadena está contenida en uno de los chips en mi lista de chips y los muestro debajo de la barra de búsqueda. Pero entonces tendría que rechazar algunas características geniales de autocompletar.
No puedo adjuntar imágenes todavía, porque soy demasiado nuevo. ¡Lo siento por eso!
Espero haber incluido todas las Infos.
1 Respuestas
Responde la pregunta0
Verifique este codesandbox que hice: https://codesandbox.io/s/stack-70189718-eqwgl?file=/src/components/AutoChips.vue
Algunos componentes de vuetify tienen una cosa llamada slots , que puede personalizar según sus necesidades, en caso de que v-autocomplete tenga una ranura de item , para personalizar los elementos de la lista mostrada. Todo lo que necesita hacer es crear una plantilla personalizada para un elemento de la lista.
<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> Puede establecer un color personalizado para cada v-chip creando un método simple y pasando el valor del elemento.
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' } } Si también desea personalizar las fichas seleccionadas, puede hacerlo simplemente modificando la ranura de selection . Puede verificar todas las ranuras disponibles de v-autocomplete en su página de documentación API. https://vuetifyjs.com/en/api/v-autocomplete/#ranuras
