Creare una direttiva personalizzata in Nuxt.js

È 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.

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.

Implementare in modo che la funzione di callback possa essere passata dal componente.

3. Ora utilizzare v-scroll nella pagina.

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

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.

Argomenti

oldVnode: nodo virtuale precedentemente renderizzato

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

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.