Select fields components are used for collecting user provided information from a list of options.
Si vous utilisez des objets pour la propriété items, vous devrez probablement associer item-text et item-value aux propriétés correspondantes sur vos propres objets. Ces valeurs sont par défaut text et value mais peuvent être modifiées pour coller à votre structure de données.
La propriété auto de menu-props n'est supportée que pour le style d'inputs par défaut.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
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.
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
Réduit la hauteur de l'entrée
Disables keyboard lookup
Disables the input
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
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
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
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
string0.2 !default;true !default;4px !default;68px !default;40px !default;40px !default;42px !default;0 4px 0 4px !default;5px 4px 3px 0 !default;4px 0 !default;8px 0 !default;20px !default;7px !default;.22 !default;18px !default;7px 4px 7px 0 !default;20px !default;38px !default;26px !default;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
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
You cannot use disabled v-select.
You cannot use read-only v-select, but it looks default.
A standard single select has a multitude of configuration options.
Use a custom prepended or appended icon.
A multi-select can utilize v-chip as the display for selected items.
You can use dense prop to reduce the field height and lower max height of list items.
You can specify the specific properties within your items array correspond to the text and value fields. By default, this is text and value. In this example we also use the return-object prop which will return the entire object of the selected item on selection.
Custom props can be passed directly to v-menu using menuProps prop. In this example menu is force directed to top and shifted to top.
The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.
The selection slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.
Prêt pour plus ? Continuez la lecture avec :