บทสรุปของโพสต์โดย durumis AI
- อธิบายวิธีการใช้ไดเร็กทีฟแบบกำหนดเองใน Nuxt.js เพื่อใช้ฟังก์ชันทั่วไปกับหน้าหรือคอมโพเนนต์
- โดยใช้ไดเร็กทีฟการเลื่อนเป็นตัวอย่าง ใช้ฟังก์ชัน Hook เช่น `bind`, `inserted`, `update`, `componentUpdated`, `unbind` เพื่อสร้างการทำงานตามเหตุการณ์การเลื่อน และลงทะเบียนในปลั๊กอิน Nuxt เพื่อให้สามารถใช้งานได้ทั่วโลก
- อธิบายรายละเอียดเกี่ยวกับบทบาทและเวลาในการใช้ Hook ต่างๆ สำหรับการจัดการ DOM และตัวฟังเหตุการณ์
การสร้างฟังก์ชันที่ใช้ร่วมกันกับ DOM ในหลายๆ เพจหรือหลายๆ คอมโพเนนต์
ทำได้ง่ายๆ ด้วยการสร้างเป็น custom directive
เราจะสร้างตัวอย่าง scroll directive
- มีประโยชน์ในการโหลดข้อมูลขณะเลื่อนดู หรือแสดง toast ขณะเลื่อนดูในหน้าหลักหรือหน้ารายละเอียด
1. ขั้นแรก สร้างไฟล์และลงทะเบียนใน nuxt plugin
// nuxt.config.js
export default {
plugins: [
'~/plugins/v-scroll.js', // การลงทะเบียนปลั๊กอิน
],
}
nuxt config plugins จะดำเนินการไฟล์ที่กำหนดไว้เมื่อเริ่มต้นแอปพลิเคชัน Nuxt เพื่อเปิดใช้งานการทำงานบางอย่าง = สามารถใช้ฟังก์ชันเฉพาะได้ทั่วโลก
2. สร้าง scroll directive
// plugins/v-scroll.js
import Vue from 'vue';
// การลงทะเบียน custom directive
Vue.directive('scroll', {
inserted(el, binding) {
const callback = binding.value.callback; // ฟังก์ชัน callback ที่ส่งมา
const offset = binding.value.offset || 0; // offset ที่กำหนดเอง (ค่าเริ่มต้น 0)
// event handler สำหรับการเลื่อน
const onScroll = () => {
const scrollPosition = window.scrollY + window.innerHeight;
const elementPosition = el.offsetTop + offset;
if (scrollPosition >= elementPosition) {
callback();
}
};
// ลงทะเบียน event listener สำหรับการเลื่อน
window.addEventListener('scroll', onScroll);
// เอา event listener ออกเมื่อ unbind element
el._onScroll = onScroll;},
unbind(el) {
// เอา event listener สำหรับการเลื่อนออก
window.removeEventListener('scroll', el._onScroll);
delete el._onScroll;
}
});
สร้างให้สามารถส่ง callback function จากคอมโพเนนต์ได้
3. ตอนนี้ใช้ v-scroll ในเพจได้แล้ว
<template>
<div v-scroll="{callback: loadMore, offset: 100}">
</div>
</template>
<script>
export default {
//...ละไว้
methods: {
loadMore() {
//รับข้อมูลเพิ่มเติม (fetch, axios ฯลฯ)
}
}
}
</script>
อื่นๆ
มี hook บางอย่างที่สามารถใช้ได้เมื่อสร้าง custom directive
1. bind(el, binding, vnode)
คำอธิบาย: เรียกใช้เพียงครั้งเดียวเมื่อ directive ถูกผูกกับ element เป็นครั้งแรก
สามารถตั้งค่าเริ่มต้นให้กับ element ที่ถูกผูกไว้ได้ที่นี่
el: องค์ประกอบ DOM ที่ directive ถูกผูกไว้
binding: ออบเจ็กต์ที่มีค่า นิพจน์ และอาร์กิวเมนต์ของ directive
vnode: โหนดเสมือนที่สร้างโดย Vue compiler
Vue.directive('color', {
bind(el, binding) {
// ตั้งค่าสีข้อความเมื่อ directive ถูกผูกไว้
el.style.color = binding.value;
}
});
2. inserted(el, binding, vnode)
คำอธิบาย: เรียกใช้เมื่อ element ที่ถูกผูกไว้ถูกแทรกเข้าไปใน DOM กล่าวคือ ใช้เมื่อ directive ถูกเพิ่มเข้าไปใน DOM จริงๆ
* ในโค้ดการผูกเหตุการณ์การเลื่อนดู คุณจะเห็นว่าการทำงานที่เกี่ยวข้องกับ DOM จะดำเนินการในช่วงเวลาของ inserted hook
3. update(el, binding, vnode, oldVnode)
คำอธิบาย: เรียกใช้ทุกครั้งที่แอตทริบิวต์หรือค่าของ element ที่ถูกผูกไว้เปลี่ยนแปลง
แต่ยังอยู่ในสถานะก่อนที่คอมโพเนนต์ลูกจะอัปเดต
ใช้เมื่อจำเป็นต้องดำเนินการ DOM เมื่อค่าการผูกเปลี่ยนแปลง
oldVnode: โหนดเสมือนที่เรนเดอร์ก่อนหน้า
4. componentUpdated(el, binding, vnode, oldVnode)
คำอธิบาย: เรียกใช้หลังจากที่แอตทริบิวต์หรือค่าของ element ที่ถูกผูกไว้ได้รับการอัปเดตและคอมโพเนนต์ลูกทั้งหมดได้รับการอัปเดตแล้ว
กล่าวคือ ดำเนินการในสถานะ DOM สุดท้าย รอจนกว่าค่าของคอมโพเนนต์ลูกจะเปลี่ยนแปลงก่อนจึงดำเนินการ
5. unbind(el, binding, vnode)
คำอธิบาย: เรียกใช้เมื่อ directive ไม่ถูกนำไปใช้กับ element อีกต่อไปและ element ถูกทำลาย
ในช่วงเวลานี้จะดำเนินการลบ event listener หรือการทำงานจัดการต่างๆ
* ในตัวอย่าง custom scroll จะทำการลบ event listener ในช่วงเวลาของ unbind