Création d’un composant de zone de liste double dans Vue.js / Blogs / Perficient

UN zone de liste double est un composant d’interface utilisateur couramment utilisé dans Vue.js qui permet aux utilisateurs de sélectionner des éléments dans une liste (la source) et de les déplacer vers une autre (la destination). Ce composant est idéal pour les scénarios dans lesquels les utilisateurs doivent sélectionner plusieurs éléments dans une grande liste, offrant des fonctionnalités permettant de filtrer, rechercher et sélectionner facilement des éléments.

Dans ce blog, nous apprendrons comment créer un zone de liste double composant dans Vue.js en utilisant TypeScript, en mettant en évidence des fonctionnalités telles que la recherche, le filtrage et le déplacement d’éléments entre les listes.

Caractéristiques de la zone de liste double

• Fonctionnalité de recherche pour affiner les éléments de la liste.
• Déplacez un ou plusieurs éléments entre les listes.
• Filtrez les éléments en fonction de leur statut (par exemple, actif ou inactif).
• Prise en charge des interactions au clavier telles que Ctrl + Click pour sélectionner plusieurs éléments.

Étape 1 : Mise en place du projet

Avant de plonger dans la construction du composant, commençons par configurer le projet. Nous allons commencer par installer les dépendances nécessaires pour commencer.

Étape 1.1 : Installer Vue et Vue-Property-Decorator

Pour commencer, ouvrez votre terminal et exécutez la commande suivante pour installer Vue et le vue-property-decorator package, que nous utiliserons pour exploiter les décorateurs TypeScript :

Étape 1.2 : Créer le fichier DualListBox.vue

Ensuite, accédez au components répertoire de votre projet Vue et créez un nouveau fichier appelé DualListBox.vue. Ce fichier servira de base à notre composant. Nous définirons la structure de deux sections clés : une pour les éléments disponibles et une pour les éléments sélectionnés, avec des boutons entre les deux pour déplacer les éléments d’avant en arrière.

En savoir plus sur la configuration de projets Vue dans ce détail guide de Vue Mastery

Étape 2 : Créer la mise en page pour les éléments disponibles

Une fois la configuration du projet terminée, passons à la création de la mise en page de la section des éléments disponibles. Cette partie comprendra la fonctionnalité de recherche, le nombre d’articles et les options de filtrage.

Étape 2.1 : Zone de recherche des éléments disponibles

Pour aider les utilisateurs à affiner les éléments disponibles, ajoutez un champ de saisie de recherche. Cette entrée sera liée au searchSource propriété data, permettant aux utilisateurs de filtrer les éléments de manière dynamique.

Étape 2.2 : Afficher le nombre d’articles disponibles

Après avoir ajouté l’entrée de recherche, il est utile d’afficher aux utilisateurs le nombre d’éléments correspondant aux critères de recherche. Nous pouvons afficher le nombre d’éléments filtrés ainsi que le nombre total d’éléments disponibles.

Étape 2.3 : Ajouter une case à cocher pour les éléments actifs

Dans certains cas, les utilisateurs peuvent souhaiter filtrer les éléments en fonction de leur statut (par exemple, actif ou inactif). Pour fournir cette option, incluez une case à cocher qui filtre les éléments actifs, contrôlés par le activeItems propriété.

Étape 2.4 : Liste des éléments disponibles

Maintenant, nous allons afficher les éléments disponibles dans une liste. Chaque élément sera cliquable, permettant aux utilisateurs de le sélectionner et de le déplacer vers la liste des éléments sélectionnés.

Étape 3 : ajouter des boutons pour déplacer des éléments

Entre les listes d’éléments disponibles et sélectionnés, nous avons besoin de boutons pour faciliter le déplacement des éléments. Ces boutons permettent aux utilisateurs de déplacer des éléments entre les deux listes, un à la fois ou tous à la fois.

Étape 4 : Créer la mise en page pour les éléments sélectionnés

Ensuite, nous allons créer la mise en page pour la section des éléments sélectionnés. Cette partie reflète la section des éléments disponibles, avec des fonctionnalités de recherche, de filtrage et d’affichage des éléments.

Étape 4.1 : Zone de recherche pour les éléments sélectionnés

Pour permettre aux utilisateurs de rechercher parmi les éléments sélectionnés, ajoutez une entrée de recherche liée à searchDestination.

Étape 4.2 : Afficher le nombre d’éléments sélectionnés

Tout comme la section des éléments disponibles, affiche le nombre d’éléments filtrés et le total dans la liste sélectionnée.

Étape 4.3 : Liste des éléments sélectionnés

Enfin, nous afficherons les éléments sélectionnés, permettant aux utilisateurs de cliquer dessus pour les supprimer de la liste.

Étape 5 : Définition des propriétés et des données

Maintenant que le modèle est en place, passons à la section script. Nous définirons les propriétés et les données nécessaires à la gestion des listes et des interactions. Utiliser @Prop accepter availableItems et selectedItems du composant parent.

Étape 6 : Implémentation de listes filtrées

Pour garantir que les fonctionnalités de recherche et de filtrage fonctionnent comme prévu, créez des propriétés calculées qui renvoient les listes filtrées en fonction des termes de recherche et de l’état des éléments.

Étape 7 : Implémentation de la logique de déplacement

Ensuite, implémentez les méthodes qui gèrent le déplacement des éléments entre les listes disponibles et sélectionnées. Ceux-ci incluent :

• moveToDestination pour déplacer les éléments sélectionnés de disponibles à sélectionnés.
• moveToSource pour déplacer les éléments vers disponibles.
• moveAllToDestination pour déplacer tous les éléments disponibles.
• moveAllToSource pour déplacer tous les éléments sélectionnés vers l’arrière.

Étape 8 : émission d’événements vers le composant parent

Lorsque des éléments sont déplacés entre des listes, nous émettons un événement pour avertir le composant parent de mettre à jour son état. Voici un exemple d’émission du surListeChangement événement:

Dans le composant parent, écoutez cet événement pour mettre à jour les éléments sélectionnés et disponibles en conséquence.

Pour en savoir plus sur la gestion des événements dans Vue.js, consultez la documentation officielle de Vue sur la gestion des événements.

Étape 9 : styliser le composant

Enfin, ajoutez des styles CSS pour rendre la double zone de liste visuellement attrayante. Vous pouvez personnaliser les zones de liste, les boutons et les entrées de recherche en fonction de vos exigences de conception.

Conclusion

Dans ce didacticiel, vous avez créé un composant de zone de liste double à l’aide de Vue.js avec TypeScript. Ce composant permet aux utilisateurs de déplacer des éléments entre deux listes, de rechercher dans les listes et de filtrer les éléments par statut. Vous pouvez étendre davantage ce composant en ajoutant des fonctionnalités telles que le glisser-déposer ou la navigation au clavier.