Criando diretivas personalizadas em Nuxt.js

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

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.

Implementa-se para que a função de callback possa ser passada do componente.

3. Agora, use v-scroll na página.

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

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.