Cet article explique comment utiliser les directives personnalisées dans Nuxt.js pour appliquer des fonctionnalités communes aux pages ou aux composants.
En prenant l'exemple d'une directive de défilement, nous implémentons un comportement basé sur les événements de défilement à l'aide des fonctions hook : `bind`, `inserted`, `update`, `componentUpdated`, `unbind`, et nous l'enregistrons en tant que plugin Nuxt pour une utilisation globale.
Nous expliquons en détail le rôle de chaque hook et son moment d'utilisation pour la manipulation du DOM et la gestion des écouteurs d'événements.
Il est pratique de créer des directives personnalisées pour les fonctionnalités appliquées au DOM de manière commune sur plusieurs pages ou composants.
Nous allons créer un exemple de directive de défilement.
- Utile pour le chargement de données lors du défilement, l'affichage de toasts lors du défilement, etc., sur l'écran principal ou les pages de détail.
1. Tout d'abord, créez le fichier et enregistrez-le dans le plugin Nuxt.
// nuxt.config.jsexportdefault{plugins:['~/plugins/v-scroll.js',// Enregistrement du plugin],}
Les plugins de configuration Nuxt exécutent les fichiers définis lors de l'initialisation de l'application Nuxt pour activer des actions spécifiques. = Une fonction spécifique peut être utilisée globalement.
2. Implémentez la directive de défilement.
// plugins/v-scroll.jsimportVuefrom'vue';// Enregistrement de la directive personnaliséeVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Fonction de rappel transmiseconst offset = binding.value.offset||0;// Décalage personnalisé (valeur par défaut 0)// Gestionnaire d'événements de défilementconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Enregistrement de l'écouteur d'événements de défilementwindow.addEventListener('scroll', onScroll);// Suppression de l'écouteur d'événements lors de la désactivation de l'élément el._onScroll= onScroll;},unbind(el){// Suppression de l'écouteur d'événements de défilementwindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Implémentez pour pouvoir transmettre la fonction de rappel depuis le composant.
3. Utilisez maintenant v-scroll dans la page.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...omismethods:{loadMore(){// Obtenir plus de données (fetch, axios, etc.)}}}</script>
Autres
Il existe plusieurs hooks qui peuvent être utilisés lors de la création de directives personnalisées.
1. bind(el, binding, vnode) Description : Appelé une seule fois lorsque la directive est liée à un élément pour la première fois.
Vous pouvez effectuer la configuration initiale de l'élément lié ici.
Arguments
el : Élément DOM auquel la directive est liée binding : Objet contenant la valeur, l'expression et les arguments de la directive vnode : Nœud virtuel créé par le compilateur Vue
Vue.directive('color',{bind(el, binding){// Définition de la couleur du texte lorsque la directive est liée el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Description : Appelé lorsque l'élément lié est inséré dans le DOM. En d'autres termes, il est utilisé lorsque la directive est réellement ajoutée au DOM.
* Dans le code de liaison d'événements de défilement, les opérations liées au DOM sont effectuées au moment du hook inséré.
3. update(el, binding, vnode, oldVnode)
Description : Appelé chaque fois que les attributs ou la valeur de l'élément lié changent.
Cependant, c'est avant que les composants enfants ne soient mis à jour.
Utilisé lorsque des opérations DOM sont nécessaires lorsque la valeur de liaison change.
Arguments
oldVnode : Noeud virtuel rendu précédemment
4. componentUpdated(el, binding, vnode, oldVnode)
Description : Appelé après que les attributs ou la valeur de l'élément lié aient été mis à jour et que les composants enfants aient également été mis à jour.
En d'autres termes, il est exécuté dans l'état final du DOM. Il attend que la valeur du composant enfant change avant de s'exécuter.
5. unbind(el, binding, vnode)
Description : Appelé lorsque la directive n'est plus appliquée à l'élément et que l'élément est détruit.
À ce stade, supprimez les écouteurs d'événements ou effectuez les tâches de nettoyage.
* Dans l'exemple personnalisé de défilement, les écouteurs d'événements sont nettoyés au moment de la désactivation.