Se explica cómo aplicar funciones comunes a páginas o componentes utilizando directivas personalizadas en Nuxt.js.
Utilizando una directiva de desplazamiento como ejemplo, se implementa el comportamiento según los eventos de desplazamiento utilizando las funciones hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind`, y se registra en un plugin de Nuxt para poder usarlo globalmente.
Se explica en detalle la función y el momento de uso de cada hook para la manipulación del DOM y la gestión de los escuchadores de eventos.
Es conveniente crear directivas personalizadas para las funciones que se aplican comúnmente al DOM en varias páginas o componentes.
Se pretende crear un ejemplo de directiva de desplazamiento.
- Resulta útil para la carga de datos al desplazarse, mostrar un mensaje tipo toast al desplazarse, etc., en la pantalla principal o en páginas de detalles.
1. Primero, cree el archivo y regístrelo en el plugin de Nuxt.
// nuxt.config.jsexportdefault{plugins:['~/plugins/v-scroll.js',// Registro del plugin],}
Los plugins de configuración de Nuxt ejecutan los archivos definidos cuando se inicializa la aplicación Nuxt para activar ciertas acciones. = Permite utilizar funciones específicas globalmente.
2. Implemente la directiva de desplazamiento.
// plugins/v-scroll.jsimportVuefrom'vue';// Registro de la directiva personalizadaVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Función de devolución de llamada transmitidaconst offset = binding.value.offset||0;// Desplazamiento personalizado (valor predeterminado 0)// Manejador de eventos de desplazamientoconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Registro del escuchador de eventos de desplazamientowindow.addEventListener('scroll', onScroll);// Eliminación del escuchador de eventos cuando el elemento se desvincula el._onScroll= onScroll;},unbind(el){// Eliminación del escuchador de eventos de desplazamientowindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Se implementa para que el componente pueda pasar la función de devolución de llamada.
3. Ahora, use v-scroll en la página.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...omitidomethods:{loadMore(){//Obtener más datos (fetch, axios, etc...)}}}</script>
Otros
Hay algunos ganchos que se pueden usar al crear una directiva personalizada.
1. bind(el, binding, vnode) Descripción: Se llama solo una vez cuando la directiva se enlaza por primera vez a un elemento.
Aquí puede realizar la configuración inicial del elemento enlazado.
Argumentos
el: Elemento DOM al que está enlazada la directiva binding: Objeto que contiene el valor, la expresión y los argumentos de la directiva vnode: Nodo virtual creado por el compilador de Vue
Vue.directive('color',{bind(el, binding){// Establecer el color del texto cuando se enlaza la directiva el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Descripción: Se llama cuando el elemento enlazado se inserta en el DOM. Es decir, se utiliza cuando la directiva se agrega realmente al DOM.
* En el código de enlace del evento de desplazamiento, realiza operaciones relacionadas con el DOM en el momento del gancho insertado.
3. update(el, binding, vnode, oldVnode)
Descripción: Se llama cada vez que cambian los atributos o el valor del elemento enlazado.
Sin embargo, todavía está en el estado antes de que se actualicen los componentes secundarios.
Se utiliza cuando es necesario realizar una operación DOM cuando cambia el valor de enlace.
Argumentos
oldVnode: Nodo virtual renderizado previamente
4. componentUpdated(el, binding, vnode, oldVnode)
Descripción: Se llama después de que se actualicen los atributos o el valor del elemento enlazado y todos los componentes secundarios.
Es decir, se realiza en el estado final del DOM. Espera a que cambie el valor del componente secundario antes de ejecutarse.
5. unbind(el, binding, vnode)
Descripción: Se llama cuando la directiva ya no se aplica al elemento y el elemento se destruye.
En este momento, elimina los escuchadores de eventos o realiza tareas de limpieza.
* En el ejemplo personalizado de desplazamiento, el escuchador de eventos se limpia en el momento de la desvinculación.