UI Kütüphane Bileşenlerini Genişletilebilir Ortak VUE Bileşenlerine Dönüştürme

Bootstrap, Vuetify gibi UI kütüphaneleri kullanıldığında

yüksek kaliteli UI bileşenlerini kolayca kullanmak mümkün olur.

Ancak, özelleştirme konusunda sık sık tereddüt yaşanır.

Genellikle bileşen içindeki öğelere erişmek için

:deep(.class-name) gibi bir yaklaşım kullanılır, ancak

sorun, aynı bileşenin aynı ekranda farklı şekillerde özelleştirilmesi gerektiğinde veya

farklı bir ekranda aynı stilin uygulanması gerektiğinde ortaya çıkar.

Örneğin,

buefy'nin tooltip bileşeninin arka plan rengini değiştirmek istersek, aşağıdaki gibi kullanılabilir.

Ancak, bazı bileşenleri siyah, diğerlerini turuncu yapmak istersek?

Her seferinde yeni bir sınıf uygulanır. (CSS geçersiz kılma)

Başka bir ekranda da siyah tooltip kullanmak istersek?

Stili kopyala-yapıştır yaparız. (Veya bir modül kullanırız.)

Yukarıdaki sorunu çözmek için, biraz daha genişletilebilir bir bileşen aşağıdaki gibi oluşturuldu.

Yukarıdaki gibi yapılandırılır.

Şimdi, üst bileşende custom-tooltip.vue kullanılır.

Yukarıdaki yöntem dışında çeşitli çözüm yolları vardır.

- Özel direktif oluşturup genişletme yöntemi

- $variables kullanarak temayı genişletme yöntemi

Birçok kısım atlanmış olsa da, stil yanında çeşitli mantık veya API'ler dahil olduğunda,

bu şekilde bileşenlerle sarma yönteminin daha uygun olabileceği düşünülmektedir.

• Ayrıca iyi bir fikriniz varsa lütfen bildiriniz.