Artikel ini menjelaskan cara menggunakan custom directive di Nuxt.js untuk menerapkan fungsi umum ke halaman atau komponen.
Menggunakan directive scroll sebagai contoh, kita akan mengimplementasikan perilaku berdasarkan event scroll menggunakan fungsi hook `bind`, `inserted`, `update`, `componentUpdated`, `unbind`, dan membuatnya dapat digunakan secara global dengan mendaftarkannya ke plugin Nuxt.
Penjelasan detail tentang peran masing-masing hook dan waktu penggunaannya untuk manipulasi DOM dan manajemen event listener.
Fungsi-fungsi yang diterapkan secara umum ke DOM di berbagai halaman atau komponen
akan lebih mudah jika dibuat sebagai directive kustom.
Saya ingin membuat contoh directive scroll.
- Berguna untuk memuat data saat menggulir, menampilkan toast saat menggulir di layar utama atau halaman detail, dll.
1. Pertama, buat file dan daftarkan di plugin nuxt.
Plugin konfigurasi nuxt menjalankan file yang telah ditentukan saat aplikasi Nuxt diinisialisasi untuk mengaktifkan perilaku tertentu. = Fungsi tertentu dapat digunakan secara global.
2. Implementasikan directive scroll.
// plugins/v-scroll.jsimportVuefrom'vue';// Pendaftaran directive kustomVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Fungsi callback yang diteruskanconst offset = binding.value.offset||0;// Offset kustom (nilai default 0)// Handler acara gulirconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Pendaftaran pendengar acara gulirwindow.addEventListener('scroll', onScroll);// Menghapus pendengar acara saat elemen di-unbind el._onScroll= onScroll;},unbind(el){// Menghapus pendengar acara gulirwindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Fungsi callback dapat diteruskan dari komponen.
3. Sekarang gunakan v-scroll di halaman.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...diabaikanmethods:{loadMore(){//Dapatkan lebih banyak data (fetch, axios, dll...)}}}</script>
Lainnya
Ada beberapa hook yang dapat digunakan saat membuat directive kustom.
1. bind(el, binding, vnode) Penjelasan: Dipanggil hanya sekali ketika directive pertama kali di-bind ke elemen.
Pengaturan awal dapat dilakukan pada elemen yang di-bind di sini.
Argumen
el: Elemen DOM tempat directive di-bind binding: Objek yang berisi nilai, ekspresi, dan argumen directive vnode: Node virtual yang dibuat oleh kompiler Vue
Vue.directive('color',{bind(el, binding){// Mengatur warna teks saat directive di-bind el.style.color= binding.value;}});
2. inserted(el, binding, vnode)
Penjelasan: Dipanggil ketika elemen yang di-bind disisipkan ke dalam DOM. Dengan kata lain, digunakan ketika directive benar-benar ditambahkan ke DOM.
* Pada kode pengikatan peristiwa gulir, operasi terkait DOM dilakukan pada saat hook inserted.
3. update(el, binding, vnode, oldVnode)
Penjelasan: Dipanggil setiap kali atribut atau nilai elemen yang di-bind berubah.
Namun, ini masih dalam keadaan sebelum komponen anak diperbarui.
Digunakan ketika operasi DOM diperlukan saat nilai pengikatan berubah.
Argumen
oldVnode: Node virtual yang dirender sebelumnya
4. componentUpdated(el, binding, vnode, oldVnode)
Penjelasan: Dipanggil setelah atribut atau nilai elemen yang di-bind diperbarui dan semua komponen anak diperbarui.
Dengan kata lain, dieksekusi pada status DOM akhir. Tunggu hingga nilai komponen anak berubah sebelum dieksekusi.
5. unbind(el, binding, vnode)
Penjelasan: Dipanggil ketika directive tidak lagi diterapkan pada elemen dan elemen tersebut dihancurkan.
Pada titik ini, pendengar acara dihapus, atau pekerjaan pembersihan dilakukan.
* Pada contoh kustom scroll, pendengar acara dibersihkan pada saat unbind.