Benutzerdefinierte Direktiven in Nuxt.js erstellen

Funktionen, die mehreren Seiten oder Komponenten gemeinsam sind und auf das DOM angewendet werden,

lassen sich bequem als benutzerdefinierte Direktiven erstellen.

Ich möchte ein Beispiel für eine Scroll-Direktive erstellen.

- Nützlich für das Laden von Daten beim Scrollen auf der Hauptseite oder Detailseite, das Anzeigen von Toasts beim Scrollen usw.

1. Zuerst erstellen wir die Datei und registrieren sie im Nuxt-Plugin.

Die Nuxt-Konfigurationsplugins führen die definierten Dateien beim Initialisieren der Nuxt-Anwendung aus, um bestimmte Aktionen zu aktivieren. = Bestimmte Funktionen können global verwendet werden.

2. Implementierung der Scroll-Direktive.

Die Implementierung ermöglicht es, die Callback-Funktion von der Komponente zu übergeben.

3. Jetzt verwenden wir v-scroll auf der Seite.

Sonstiges

Es gibt einige Hooks, die beim Erstellen benutzerdefinierter Direktiven verwendet werden können.

1. bind(el, binding, vnode)
Beschreibung: Wird nur einmal aufgerufen, wenn die Direktive zum ersten Mal an ein Element gebunden wird.

Hier können Sie die anfänglichen Einstellungen für das gebundene Element vornehmen.

Parameter

el: Das DOM-Element, an das die Direktive gebunden ist
binding: Ein Objekt, das den Wert, den Ausdruck und die Argumente der Direktive enthält
vnode: Ein virtuelles Knotenelement, das vom Vue-Compiler erstellt wurde

2. inserted(el, binding, vnode)

Beschreibung: Wird aufgerufen, wenn das gebundene Element in das DOM eingefügt wurde. Das heißt, es wird verwendet, wenn die Direktive tatsächlich zum DOM hinzugefügt wurde.

* Im Code für die Scroll-Ereignisbindung im inserted-Hook werden DOM-bezogene Operationen ausgeführt.

3. update(el, binding, vnode, oldVnode)

Beschreibung: Wird immer dann aufgerufen, wenn sich die Attribute oder Werte des gebundenen Elements ändern.

Dies ist jedoch der Zustand, bevor die untergeordneten Komponenten aktualisiert wurden.

Wird verwendet, wenn DOM-Operationen erforderlich sind, wenn sich der Bindungswert ändert.

Parameter

oldVnode: Der zuvor gerenderte virtuelle Knoten

4. componentUpdated(el, binding, vnode, oldVnode)

Beschreibung: Wird aufgerufen, nachdem die Attribute oder Werte des gebundenen Elements und alle untergeordneten Komponenten aktualisiert wurden.

Das heißt, es wird im endgültigen DOM-Zustand ausgeführt. Es wartet, bis sich der Wert der untergeordneten Komponente ändert, bevor es ausgeführt wird.

5. unbind(el, binding, vnode)

Beschreibung: Wird aufgerufen, wenn die Direktive nicht mehr auf das Element angewendet wird und das Element zerstört wird.

An diesem Punkt werden Ereignislistener entfernt oder Aufräumarbeiten durchgeführt.

* Im Beispiel für die benutzerdefinierte Scroll-Direktive werden die Ereignislistener zum Zeitpunkt des Entbindens bereinigt.