Le composant v-combobox est un v-autocomplete qui permet à l'utilisateur d'entrer des valeurs qui n'existent pas dans les **éléments fournis. Les éléments ainsi créés seront retournés sous forme de strings.
Avec Combobox, vous pouvez permettre à un utilisateur de créer de nouvelles valeurs qui ne sont pas présentes dans une liste d'éléments fournis.
As the Combobox allows user input, it always returns the full value provided to it (for example a list of Objects will always return an Object when selected). This is because there's no way to tell if a value is supposed to be user input or an object lookup GitHub Issue
La propriété auto de menu-props n'est supportée que pour le style d'inputs par défaut.
La saisie automatique du navigateur est désactivée par défaut, ceci peut varier selon les navigateurs et peut même être ignoré. MDN
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Permet au menu de déborder hors de l'écran
Ajoute une icône au composant, utilise la même syntaxe que v-icon
Ajoute une icône à l'entrée du composant, utilise la même syntaxe que v-icon
Spécifie l'élément DOM auquel ce composant doit détacher.String peut être n'importe quel querySelector et Object valide peut être un noeud valide. Cela attachera au composant racine v-app par défaut.
Lors de la recherche, la première option sera toujours mise en évidence
Active autofocus
Modifie la couleur de fond de l'entrée
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Appliqué lors de l'utilisation de clearable et l'entrée est sale
Ajoute la fonctionnalité de nettoyage du champ, l'icône par défaut est clear de Material Design
Applique la couleur spécifiée à la commande - cela peut être le nom de la couleur matérielle (par exemple success ou purple) ou la couleur css (#033 ou rgba(255, 0, 0, 0.5)). Vous pouvez trouver la liste des classes construites dans la page couleurs.
Crée le compteur pour la longueur de l'entrée; si aucun numéro n'est spécifié, il est par défaut à 25. Ne s'applique à aucune validation.
Applique la variante du thème foncé au composant. Cela va par défaut la couleur des composants à white à moins que vous ayez configuré votre thème d'application à dark ou si vous utilisez le prop couleur sur le composant. Vous pouvez trouver plus d'informations sur la documentation de Design de matériaux pour thèmes foncés.
Adds a remove icon to selected chips
Accepte un tableau de chaînes qui déclenchera un nouveau tag lors de la saisie. Ne remplace pas l'onglet normal et les clés Entrées.
Réduit la hauteur de l'entrée
Disables keyboard lookup
Désactive le champ
Force le contenu des composants à effectuer le rendu sur les composants montés. Ceci est utile si vous avez du contenu qui ne sera pas rendu dans le DOM que vous voulez explorer pour le référencement.
Place le champ dans un état d'erreur manuel
Le nombre total d'erreurs devant s'afficher en même temps
Insère l'entrée dans un état d'erreur et passe par des messages d'erreur personnalisés. Il sera combiné avec toutes les validations qui se produisent à partir du prop rules Ce champ ne déclenchera pas la validation
Applique le style d'entrée remplie a la place
The function used for filtering items
Supprime l'élévation (ombre) ajoutée à l'élément lors de l'utilisation des propriétés solo ou solo-inverted
Indique le type d'entrée comme prenant la largeur complète
Définit la hauteur de l'entrée
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
Masque le menu lorsqu'il n'y a pas d'options à afficher. Utile pour empêcher le menu de s'ouvrir avant que les résultats ne soient récupérés de manière asynchrone. Il a également l'effet d'ouvrir le menu lorsque le tableau items change, s'il n'est pas déjà ouvert.
Do not display in the select menu items that are already selected
Texte d'indice
Définit l'identifiant DOM sur le composant
Sets color of selected items
Set property of items's disabled value
Set property of items's text value
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}Définit l'étiquette d'entrée
Applique la variante claire du thème au composant.
Spécifie la hauteur de l'espace de chargement
Affiche la barre de progression linéaire. Il peut s'agir d'une chaîne spécifiant la couleur appliquée à la barre de progression (toute couleur Material ou du thème – primary, secondary, success, info, ** warning , **error) ou un booléen qui utilise la couleur du composant (définie par la propriété color – s'il est pris en charge par le composant) ou la couleur primaire
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Affiche une liste de messages ou un message si vous utilisez une chaîne de caractères
Changes select to multiple. Accepts array for value
Texte affiché lorsqu'il n'y a pas de données
Ne pas appliquer le filtrage lors de la recherche. Utile lorsque les données sont filtrées côté serveur
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applique le style décrit à l'entrée
Force l'indice à toujours être visible
Définit le texte du marqueur de l'entrée
Affiche le texte du préfixe
Ajoute une icône au composant, utilise la même syntaxe que v-icon
Ajoute une icône dans l'entrée du composant, utilise la même syntaxe que v-icon
Met le champ en état de lecture seule
Changes the selection behavior to return the object directly rather than the value specified with item-value
Inverse l'orientation de l'entrée
Ajoute un rayon de bordure à l'entrée
Accepte un tableau de fonctions qui prennent une valeur d'entrée comme argument et retourne soit true / false ou une string avec un message d'erreur
Search value. Can be used with .sync modifier.
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Le label ne se déplace pas dans l'état focus / sale
Changes display of selections to chips with the small property
Modifie le style du champ d'entrée
Réduit l'opacité de l'élément jusqu'à son focus
Met le champ dans un état de succès manuel
Met le champ en état de succès et transmet les messages de succès personnalisés.
Displays suffix text
Sets input type
Retarde la validation jusqu'à l'événement de perte de focus (blur)
The input's value
The comparison algorithm used for values. More info
Ajoute un élément après le contenu de l'entrée
Adds an item after menu content
Adds an item outside the input and after input content
L'emplacement par défaut de vue.
Define a custom item appearance
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}Remplace le label par défaut
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}Affiché lorsqu'il n'y a pas d'éléments filtrés
Ajoute un élément avant le contenu de l'entrée
Adds an item inside the input and before input content
Adds an item before menu content
Slot pour la progression linéaire personnalisée (affiché lorsque la propriété loading n'est pas égale au booléen faux)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Émis lorsque l'entrée est floue
EventÉmis lorsque l'entrée est modifiée par l'interaction utilisateur
anyÉmis lorsque l'entrée est cliqué
MouseEventÉmis lorsque l'icône ajoutée est cliquée
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventÉmis lorsque l'icône précédente est cliqué
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
EventLe modèle lié mis à jour
anyEmitted when any key is pressed
KeyboardEventÉmis lorsque le clic est pressé
MouseEventÉmis lorsque le clic est libéré
MouseEventL'événement error.sync
booleanEmitted when menu item is selected using keyboard arrows
numberL'événement search-input.sync
stringVous trouverez ci-dessous une collection d'exemples simples ou complexes.
Communément connus sous le nom de tags - l'utilisateur est autorisé ici à saisir plus d'une valeur
Vous pouvez utiliser la propdense pour réduire la hauteur des combobox et la hauteur maximale inférieure des éléments de liste.
Dans cet exemple, nous utilisons un emplacement no-data personnalisé pour fournir un contexte à l'utilisateur lors de la recherche / création d'éléments.
Le v-combobox améliore les fonctionnalités ajoutées de v-select et v-autocomplete. Cela vous permet d'avoir une interface expansive pour créer des implémentations vraiment personnalisées. Cet exemple profite de certaines fonctionnalités plus avancées telles qu'un algorithme filter personnalisé, l'édition de liste d'entrées et d'éléments d'entrée dynamiques.
Prêt pour plus ? Continuez la lecture avec :