Créer une directive personnalisée dans Nuxt.js

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.

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.

Implémentez pour pouvoir transmettre la fonction de rappel depuis le composant.

3. Utilisez maintenant v-scroll dans la page.

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

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.