Explica como usar diretivas personalizadas em Nuxt.js para aplicar funcionalidades comuns a páginas ou componentes.
Usando uma diretiva de rolagem como exemplo, implementa-se o comportamento de acordo com eventos de rolagem usando as funções de gancho `bind`, `inserted`, `update`, `componentUpdated`, `unbind` e registra-se em um plugin Nuxt para uso global.
Descreve detalhadamente o papel de cada gancho para manipulação de DOM e gerenciamento de ouvintes de eventos e seu momento de uso.
É conveniente criar diretivas personalizadas para funcionalidades aplicadas ao DOM que são comuns em várias páginas ou componentes.
Pretende-se criar um exemplo de diretiva de rolagem.
É útil em telas principais ou páginas de detalhes para carregar dados durante a rolagem, exibir mensagens toast durante a rolagem, etc.
1. Primeiro, crie o arquivo e registre-o no plugin Nuxt.
// nuxt.config.jsexportdefault{plugins:['~/plugins/v-scroll.js',// Registro do plugin],}
Os plugins de configuração do Nuxt executam os arquivos definidos quando o aplicativo Nuxt é inicializado para ativar determinadas ações. = Funcionalidades específicas podem ser usadas globalmente.
2. Implemente a diretiva de rolagem.
// plugins/v-scroll.jsimportVuefrom'vue';// Registro de diretiva personalizadaVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Função de callback passadaconst offset = binding.value.offset||0;// Offset personalizado (valor padrão 0)// Manipulador de eventos de rolagemconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Registro do ouvinte de eventos de rolagemwindow.addEventListener('scroll', onScroll);// Remoção do ouvinte de eventos ao desvincular o elemento el._onScroll= onScroll;},unbind(el){// Remoção do ouvinte de eventos de rolagemwindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Implementa-se para que a função de callback possa ser passada do componente.
3. Agora, use v-scroll na página.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...omitidomethods:{loadMore(){// Obtenha mais dados (fetch, axios etc...)}}}</script>
Outros
Existem alguns hooks que podem ser usados ao criar diretivas personalizadas.
1. bind(el, binding, vnode) Descrição: Chamado apenas uma vez quando a diretiva é vinculada a um elemento pela primeira vez.
Aqui, você pode definir configurações iniciais para o elemento vinculado.
Argumentos
el: Elemento DOM ao qual a diretiva está vinculada binding: Objeto contendo o valor, expressão e argumentos da diretiva vnode: Nó virtual criado pelo compilador Vue
Vue.directive('color',{bind(el, binding){// Define a cor do texto quando a diretiva é vinculada el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Descrição: Chamado quando o elemento vinculado é inserido no DOM. Ou seja, é usado quando a diretiva é realmente adicionada ao DOM.
* No código de vinculação de eventos de rolagem, as operações relacionadas ao DOM são executadas no momento do hook inserted.
3. update(el, binding, vnode, oldVnode)
Descrição: Chamado sempre que os atributos ou valores do elemento vinculado são alterados.
No entanto, ainda é o estado antes dos componentes filho serem atualizados.
Usado quando uma operação DOM é necessária quando o valor de vinculação muda.
Argumentos
oldVnode: Nó virtual renderizado anteriormente
4. componentUpdated(el, binding, vnode, oldVnode)
Descrição: Chamado após os atributos ou valores do elemento vinculado serem atualizados e todos os componentes filho também serem atualizados.
Ou seja, é executado no estado final do DOM. Aguarda até que os valores dos componentes filho mudem antes de executar.
5. unbind(el, binding, vnode)
Descrição: Chamado quando a diretiva não é mais aplicada ao elemento e o elemento é destruído.
Neste ponto, os ouvintes de eventos são removidos ou as tarefas de limpeza são executadas.
* No exemplo personalizado de rolagem, os ouvintes de eventos são limpos no momento do unbind.