หัวข้อ
- #การขยายส่วนประกอบ
- #ส่วนประกอบทั่วไป
การใช้ไลบรารี UI เช่น Bootstrap, Vuetify
จะทำให้สามารถใช้งานส่วนประกอบ UI คุณภาพสูงได้อย่างง่ายดาย
แต่บ่อยครั้งที่ทำให้เกิดความกังวลเกี่ยวกับวิธีการปรับแต่ง
โดยทั่วไป เพื่อเข้าถึงองค์ประกอบภายในของส่วนประกอบ
มักจะใช้ :deep(.class-name) แต่
ปัญหาคือในกรณีที่ต้องปรับแต่งส่วนประกอบเดียวกันให้แตกต่างกันในหน้าจอเดียวกัน
หรือในกรณีที่ต้องใช้สไตล์เดียวกันในหน้าจออื่นๆ
ตัวอย่างเช่น
ถ้าต้องการเปลี่ยนสีพื้นหลังของส่วนประกอบ tooltip ของ buefy ให้ใช้ดังนี้
แต่ถ้าต้องการเปลี่ยนส่วนประกอบหนึ่งเป็นสีดำและอีกส่วนประกอบหนึ่งเป็นสีส้มล่ะ?
ใช้การนำไปใช้ระดับคลาสใหม่ๆ ในแต่ละครั้ง (CSS 오버라이드)
ถ้าต้องการใช้ tooltip สีดำในหน้าจออื่นล่ะ?
คัดลอกและวางสไตล์ (หรือใช้โมดูล)
เพื่อแก้ไขปัญหาดังกล่าว จึงได้สร้างส่วนประกอบที่มีความสามารถในการขยายได้มากขึ้นดังนี้
สร้างขึ้นมาดังนี้
ตอนนี้ใช้ custom-tooltip.vue ในส่วนประกอบหลัก
มีวิธีแก้ไขปัญหาอื่นๆ อีกมากมาย
- วิธีการขยายโดยการสร้างไดเร็กทีฟแบบกำหนดเอง
- วิธีการขยายธีมโดยใช้ $variables
แม้ว่าจะละรายละเอียดไปหลายส่วน แต่ถ้ามีตรรกะหรือ API ที่ซับซ้อนมากมาย
คิดว่าการห่อหุ้มด้วยส่วนประกอบเช่นนี้จะเหมาะสมกว่า
- ขอขอบคุณหากมีไอเดียดีๆ อื่นๆ มาแบ่งปัน
ความคิดเห็น0