Membuat Komponen UI Library Menjadi Komponen Vue Umum yang Skalabel

Dengan menggunakan library UI seperti Bootstrap, Vuetify, dll.

kita dapat dengan mudah menggunakan komponen UI berkualitas tinggi.

Namun, seringkali kita dihadapkan pada dilema bagaimana melakukan kustomisasi.

Biasanya, untuk mengakses elemen internal komponen,

kita sering menggunakan akses seperti :deep(.class-name), tetapi,

masalahnya muncul ketika kita perlu melakukan kustomisasi yang berbeda pada komponen yang sama di satu layar,

dan perlu menerapkan gaya yang sama di layar lain.

Misalnya,

jika kita ingin mengubah warna latar belakang komponen tooltip Buefy, kita dapat menggunakannya seperti di bawah ini.

Namun, bagaimana jika kita ingin mengubah satu komponen menjadi hitam dan komponen lainnya menjadi oranye?

Kita menerapkan kelas baru setiap saat. (CSS override)

Bagaimana jika kita ingin menggunakan tooltip hitam di layar lain?

Kita menyalin dan menempel gaya tersebut. (atau menggunakan modul).

Untuk mengatasi masalah di atas, kami telah membuat komponen yang sedikit lebih scalable seperti di bawah ini.

Kita buat seperti di atas.

Sekarang, kita gunakan custom-tooltip.vue di komponen induk.

Ada banyak cara lain untuk mengatasi masalah ini.

- Membuat directive khusus untuk memperluasnya

- Menggunakan $variables untuk memperluas tema

Meskipun banyak bagian yang dipersingkat, jika terdapat banyak logika atau API yang disertakan selain gaya,

saya merasa bahwa membungkusnya dengan komponen seperti ini mungkin lebih sesuai.

• Jika Anda memiliki ide bagus lainnya, silakan beri tahu saya.