Nuxt.js'de özel directive'leri kullanarak sayfalara veya bileşenlere ortak işlevler uygulama yöntemini açıklar.
Kaydırma directive'ı örneğiyle, `bind`, `inserted`, `update`, `componentUpdated`, `unbind` gibi hook fonksiyonlarını kullanarak kaydırma olaylarına göre işlemler gerçekleştirir ve Nuxt plugin'ine kaydederek global olarak kullanılabilir hale getirir.
DOM manipülasyonu ve olay dinleyicisi yönetimi için her bir hook'un rolü ve kullanım zamanını ayrıntılı olarak açıklar
Birçok sayfada veya bileşende DOM'a uygulanan ortak işlevleri
özel bir direktif olarak oluşturmak kolaylık sağlar.
Kaydırma direktifi örneği oluşturmak istiyorum.
- Ana ekran veya ayrıntı sayfalarında kaydırma sırasında veri yükleme, kaydırma sırasında bildirim gösterme gibi durumlarda kullanışlıdır.
1. Öncelikle, dosyayı oluşturun ve nuxt eklentisine kaydedin.
nuxt config plugins, tanımlanan dosyaların Nuxt uygulamasının başlatılması sırasında çalıştırılarak belirli işlemleri etkinleştirir. = Belirli bir işlevi global olarak kullanabilir.
2. Kaydırma direktifini uygulayın.
// plugins/v-scroll.jsimportVuefrom'vue';// Özel direktif kaydıVue.directive('scroll',{inserted(el, binding){const callback = binding.value.callback;// Gönderilen geri çağırma işleviconst offset = binding.value.offset||0;// Kullanıcı tanımlı ofset (varsayılan değer 0)// Kaydırma olayı işleyicisiconstonScroll=()=>{const scrollPosition =window.scrollY+window.innerHeight;const elementPosition = el.offsetTop+ offset;if(scrollPosition >= elementPosition){callback();}};// Kaydırma olayı dinleyicisi kaydıwindow.addEventListener('scroll', onScroll);// Eleman bağlama çözüldüğünde olay dinleyicisinin kaldırılması el._onScroll= onScroll;},unbind(el){// Kaydırma olayı dinleyicisinin kaldırılmasıwindow.removeEventListener('scroll', el._onScroll);delete el._onScroll;}});
Bileşenlerde geri çağırma işlevini iletebilmek için uygulanır.
3. Şimdi sayfada v-scroll'u kullanın.
<template><divv-scroll="{callback: loadMore, offset: 100}"></div></template><script>exportdefault{//...özetmethods:{loadMore(){// Daha fazla veri al (fetch, axios vb...)}}}</script>
Diğerleri
Özel direktif oluştururken kullanılabilecek birkaç kanca vardır.
1. bind(el, binding, vnode) Açıklama: Direktif ilk kez bir elemana bağlandığında yalnızca bir kez çağrılır.
Burada bağlanan elemana ilk ayarlar yapılabilir.
Parametreler
el: Direktifi bağlanan DOM öğesi binding: Direktifin değerini, ifadesini ve bağımsız değişkenlerini içeren nesne vnode: Vue derleyicisi tarafından oluşturulan sanal düğüm