Questo articolo spiega come applicare funzionalità comuni a pagine o componenti utilizzando direttive personalizzate in Nuxt.js.
Utilizzando come esempio una direttiva di scorrimento, vengono implementate azioni basate sugli eventi di scorrimento utilizzando le funzioni hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind`, e viene mostrato come registrarla come plugin Nuxt per un utilizzo globale.
Vengono descritti in dettaglio il ruolo e il momento di utilizzo di ciascun hook per la gestione della manipolazione del DOM e degli ascoltatori di eventi.
È conveniente creare delle direttive personalizzate per le funzionalità che vengono applicate al DOM in modo comune in diverse pagine o componenti.
Si desidera creare un esempio di direttiva di scorrimento.
- Utile per il caricamento dei dati durante lo scorrimento, la visualizzazione di un toast durante lo scorrimento, ecc., nella schermata principale o nelle pagine dei dettagli.
1. Per prima cosa, creare il file e registrarlo nel plugin Nuxt.
// nuxt.config.jsexportdefault{plugins:['~/plugins/v-scroll.js',// Registrazione del plugin],}
I plugin di configurazione di Nuxt eseguono i file definiti all'avvio dell'applicazione Nuxt per abilitare determinate azioni. = È possibile utilizzare determinate funzioni a livello globale.
2. Implementare la direttiva di scorrimento.
// plugins/v-scroll.jsimportVuefrom'vue';// Registrazione della direttiva personalizzataVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Funzione di callback trasmessaconst offset = binding.value.offset||0;// Offset personalizzato (valore predefinito 0)// Gestore dell'evento di scorrimentoconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Registrazione dell'ascoltatore dell'evento di scorrimentowindow.addEventListener('scroll', onScroll);// Rimozione dell'ascoltatore dell'evento quando l'elemento viene annullato dall'associazione el._onScroll= onScroll;},unbind(el){// Rimozione dell'ascoltatore dell'evento di scorrimentowindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Implementare in modo che la funzione di callback possa essere passata dal componente.
3. Ora utilizzare v-scroll nella pagina.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...omessomethods:{loadMore(){// Ottenere altri dati (fetch, axios, ecc...)}}}</script>
Altro
Ci sono alcuni hook che possono essere utilizzati quando si crea una direttiva personalizzata.
1. bind(el, binding, vnode) Descrizione: viene chiamato solo una volta quando la direttiva viene inizialmente associata a un elemento.
Qui è possibile effettuare le impostazioni iniziali sull'elemento associato.
Argomenti
el: elemento DOM a cui è associata la direttiva binding: oggetto che contiene il valore, l'espressione e gli argomenti della direttiva vnode: nodo virtuale creato dal compilatore Vue
Vue.directive('color',{bind(el, binding){// Impostazione del colore del testo quando la direttiva è associata el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Descrizione: viene chiamato quando l'elemento associato viene inserito nel DOM. In altre parole, viene utilizzato quando la direttiva viene effettivamente aggiunta al DOM.
* Nel codice di associazione dell'evento di scorrimento, vengono eseguite le operazioni relative al DOM al momento dell'hook inserito.
3. update(el, binding, vnode, oldVnode)
Descrizione: viene chiamato ogni volta che gli attributi o i valori dell'elemento associato vengono modificati.
Tuttavia, questo è prima che i componenti figlio vengano aggiornati.
Viene utilizzato quando è necessario eseguire operazioni DOM quando il valore di associazione cambia.
Descrizione: viene chiamato dopo che gli attributi o i valori dell'elemento associato sono stati aggiornati e anche i componenti figlio sono stati aggiornati.
In altre parole, viene eseguito nello stato finale del DOM. Aspetta che il valore del componente figlio cambi prima di eseguire.
5. unbind(el, binding, vnode)
Descrizione: viene chiamato quando la direttiva non è più applicata all'elemento e quando l'elemento viene distrutto.
A questo punto, rimuovere gli ascoltatori di eventi o eseguire le operazioni di pulizia.
* Nell'esempio personalizzato di scorrimento, gli ascoltatori di eventi vengono rimossi al momento dell'annullamento dell'associazione.