Dieser Artikel erklärt, wie man in Nuxt.js benutzerdefinierte Direktiven verwendet, um Seiten oder Komponenten gemeinsame Funktionen hinzuzufügen.
Anhand einer Scroll-Direktive wird gezeigt, wie man mithilfe der Hook-Funktionen `bind`, `inserted`, `update`, `componentUpdated`, `unbind` Aktionen basierend auf Scrolle-Events implementiert und diese über ein Nuxt-Plugin global verfügbar macht.
Die Rolle der einzelnen Hooks bei der DOM-Manipulation und der Verwaltung von Event-Listenern sowie deren Zeitpunkt der Verwendung werden detailliert erläutert.
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.
// plugins/v-scroll.jsimportVuefrom'vue';// Registrierung der benutzerdefinierten DirektiveVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Übergebene Callback-Funktionconst offset = binding.value.offset||0;// Benutzerdefinierter Offset (Standardwert 0)// Scroll-Ereignis-HandlerconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Registrierung des Scroll-Ereignis-Listenerswindow.addEventListener('scroll', onScroll);// Entfernen des Ereignis-Listeners beim Entbinden des Elements el._onScroll= onScroll;},unbind(el){// Entfernen des Scroll-Ereignis-Listenerswindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Die Implementierung ermöglicht es, die Callback-Funktion von der Komponente zu übergeben.
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
Vue.directive('color',{bind(el, binding){//Festlegung der Textfarbe, wenn die Direktive gebunden wird el.style.color= binding.value;}});
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.