The v-file-input component is a specialized input that provides a clean interface for selecting files, showing detailed selection information and upload progress. It is meant to be a direct replacement for a standard file input.
Au cœur de ce composant, le composant v-file-input est un conteneur de base qui étend v-text-field.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Le fichier v-input peut contenir plusieurs fichiers en même temps lorsque vous utilisez le prop multiple.
Le composantv-file-input peut n'accepter que des formats/types de fichiers spécifiques si vous le souhaitez. Pour plus d'informations, consultez la documentation de l'attribut accept.
Un fichier sélectionné peut être affiché comme chip. Lorsque vous utilisez les chips et multiple props, chaque puce sera affichée (par opposition au nombre de fichiers).
La taille affichée du fichier(s) sélectionné peut être configurée avec la propriété show-size . Les tailles d'affichage peuvent être soit 1024 (la valeur par défaut utilisée lors de la fourniture de true) ou 1000.
Lorsque vous utilisez la propriété show-size avec counter, le nombre de fichiers ainsi que le poids total seront affichés sous le champ.
Le composant "v-file-input" a une icône prédéfinie par défaut. Cette icône peut être modifiée sur le composant lui même ou ajustée globalement. Plus d'informations sur le changement de composants globaux sont disponibles sur la page des icônes de personnalisation.
Vous pouvez réduire la hauteur de l'entrée du fichier avec la prop dense.
En utilisant l'emplacement selection, vous pouvez personnaliser l'apparence de vos sélections d'entrée. Ceci est généralement fait avec chips, mais n'importe quel composant ou balisage peut être utilisé.
Comme pour les autres entrées, vous pouvez utiliser la prop rules pour créer et personnaliser vos propres règles de validation.
La flexibilité du slot selection permet de gérer des cas d'utilisation complexes. Dans cet exemple, nous affichons les deux premières sélections de fichiers sous forme de chips, les fichiers suivants sont mentionnés plus discrètement par un compteur. Essayez de sélectionner au moins trois fichiers pour constater par vous même ce comportement.
Prêt pour plus ? Continuez la lecture avec :