Egyéni direktívák létrehozása Nuxt.js-ben

Hasznos, ha a több oldalon vagy komponensen közösen alkalmazott DOM-funkciókat

egyéni direktívákká alakítjuk.

Egy görgetési direktíva példányát szeretnénk létrehozni.

- Hasznos lehet a főképernyőn vagy a részletes oldalakon, például adatbetöltés görgetéskor, vagy toast üzenet megjelenítése görgetéskor.

1. Először létrehozzuk a fájlt, és regisztráljuk a Nuxt pluginben.

A Nuxt config pluginjei a definiált fájlokat a Nuxt alkalmazás inicializálása során futtatják, és aktiválják a specifikus műveleteket. = Specifikus funkciók globálisan használhatók.

2. Implementáljuk a görgetési direktívát.

Lehetővé tesszük a visszahívási függvény átadását a komponensekből.

3. Most már használhatjuk a v-scroll-t az oldalakon.

Egyéb

Néhány hasznos kampó létezik egyéni direktívák létrehozásakor.

1. bind(el, binding, vnode)
Leírás: Csak egyszer hívódik meg, amikor a direktíva először kötődik az elemhez.

Itt állíthatjuk be a kötött elem kezdeti beállításait.

Argumentumok

el: A DOM elem, amelyhez a direktíva kötődik
binding: Objektum, amely tartalmazza a direktíva értékét, kifejezését és argumentumait
vnode: A Vue fordító által létrehozott virtuális csomópont

2. inserted(el, binding, vnode)

Leírás: Akkor hívódik meg, amikor a kötött elem be lett illesztve a DOM-ba. Azaz, amikor a direktíva ténylegesen hozzá lett adva a DOM-hoz.

* A görgetési eseménykötés kódjában a DOM-mal kapcsolatos műveleteket az inserted kampóban végezzük.

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

Leírás: Minden alkalommal meghívódik, amikor a kötött elem attribútuma vagy értéke megváltozik.

De a gyermek komponensek még nem lettek frissítve.

Akkor használjuk, ha a DOM-műveletekre van szükség a kötött érték megváltozásakor.

Argumentumok

oldVnode: Az előzőleg renderelt virtuális csomópont

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

Leírás: Akkor hívódik meg, amikor a kötött elem attribútuma vagy értéke frissítve lett, és a gyermek komponensek is frissültek.

Azaz, a végső DOM állapotban történik. Megvárja, hogy a gyermek komponensek értékei megváltozzanak, majd végrehajtja a műveletet.

5. unbind(el, binding, vnode)

Leírás: Akkor hívódik meg, amikor a direktíva már nem érvényes az elemről, és az elem megsemmisül.

Ekkor távolítsuk el az eseményfigyelőket, vagy végezzünk el takarítási műveleteket.

* A scroll egyéni példában is eltávolítjuk az eseményfigyelőt az unbind kampóban.