สร้างไดเร็กทีฟแบบกำหนดเองใน Nuxt.js

การสร้างฟังก์ชันที่ใช้ร่วมกันกับ DOM ในหลายๆ เพจหรือหลายๆ คอมโพเนนต์

ทำได้ง่ายๆ ด้วยการสร้างเป็น custom directive

เราจะสร้างตัวอย่าง scroll directive

- มีประโยชน์ในการโหลดข้อมูลขณะเลื่อนดู หรือแสดง toast ขณะเลื่อนดูในหน้าหลักหรือหน้ารายละเอียด

1. ขั้นแรก สร้างไฟล์และลงทะเบียนใน nuxt plugin

nuxt config plugins จะดำเนินการไฟล์ที่กำหนดไว้เมื่อเริ่มต้นแอปพลิเคชัน Nuxt เพื่อเปิดใช้งานการทำงานบางอย่าง = สามารถใช้ฟังก์ชันเฉพาะได้ทั่วโลก

2. สร้าง scroll directive

สร้างให้สามารถส่ง callback function จากคอมโพเนนต์ได้

3. ตอนนี้ใช้ v-scroll ในเพจได้แล้ว

อื่นๆ

มี hook บางอย่างที่สามารถใช้ได้เมื่อสร้าง custom directive

1. bind(el, binding, vnode)
คำอธิบาย: เรียกใช้เพียงครั้งเดียวเมื่อ directive ถูกผูกกับ element เป็นครั้งแรก

สามารถตั้งค่าเริ่มต้นให้กับ element ที่ถูกผูกไว้ได้ที่นี่

พารามิเตอร์

el: องค์ประกอบ DOM ที่ directive ถูกผูกไว้
binding: ออบเจ็กต์ที่มีค่า นิพจน์ และอาร์กิวเมนต์ของ directive
vnode: โหนดเสมือนที่สร้างโดย Vue compiler

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