Tworzenie niestandardowych dyrektyw w Nuxt.js

Funkcje stosowane powszechnie do DOM w wielu stronach lub komponentach

łatwiej jest utworzyć je jako niestandardowe dyrektywy.

Chcemy stworzyć przykładową dyrektywę przewijania.

- Jest to przydatne w przypadku ładowania danych podczas przewijania na głównym ekranie lub stronie szczegółów, wyświetlania powiadomień toast podczas przewijania itp.

1. Najpierw utwórz plik i zarejestruj go w wtyczce Nuxt.

Wtyczki Nuxt config definiują pliki, które są uruchamiane podczas inicjalizacji aplikacji Nuxt, aby włączyć określone funkcje. = Oznacza to, że określoną funkcję można używać globalnie.

2. Zaimplementuj dyrektywę przewijania.

Zaimplementuj możliwość przekazania funkcji zwrotnej z komponentu.

3. Teraz użyj v-scroll na stronie.

Inne

Istnieje kilka haczyków, których można użyć podczas tworzenia niestandardowych dyrektyw.

1. bind(el, binding, vnode)
Opis: Wywoływane tylko raz, gdy dyrektywa jest po raz pierwszy powiązana z elementem.

Tutaj można wykonać początkową konfigurację powiązanego elementu.

Argumenty

el: Element DOM, do którego powiązano dyrektywę
binding: Obiekt zawierający wartość, wyrażenie i argumenty dyrektywy
vnode: Węzeł wirtualny utworzony przez kompilator Vue

2. inserted(el, binding, vnode)

Opis: Wywoływane, gdy powiązany element jest wstawiany do DOM. Oznacza to, że jest używane, gdy dyrektywa jest faktycznie dodana do DOM.

* W kodzie powiązania zdarzeń przewijania, operacje związane z DOM są wykonywane w momencie wywołania haka inserted.

3. update(el, binding, vnode, oldVnode)

Opis: Wywoływane za każdym razem, gdy zmieniają się atrybuty lub wartości powiązanego elementu.

Jednakże, jest to stan przed zaktualizowaniem komponentów potomnych.

Jest używane, gdy konieczne jest wykonanie operacji DOM po zmianie wartości powiązania.

Argumenty

oldVnode: Poprzednio renderowany węzeł wirtualny

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

Opis: Wywoływane po zaktualizowaniu atrybutów lub wartości powiązanego elementu i wszystkich komponentów potomnych.

Oznacza to, że jest wykonywane w ostatecznym stanie DOM. Oczekuje na zmianę wartości komponentów potomnych, a następnie wykonuje się.

5. unbind(el, binding, vnode)

Opis: Wywoływane, gdy dyrektywa nie jest już stosowana do elementu i element jest niszczony.

W tym momencie usuwane są słuchacze zdarzeń lub wykonywane są zadania sprzątania.

* W przykładzie niestandardowej dyrektywy scroll, słuchacze zdarzeń są czyszczone w momencie unbind.