Tworzenie skalowalnych, wspólnych komponentów Vue z komponentów biblioteki UI

Korzystając z bibliotek UI takich jak Bootstrap czy Vuetify,

można łatwo korzystać z wysokiej jakości komponentów interfejsu użytkownika.

Jednakże, często pojawia się problem z tym, jak przeprowadzić ich personalizację.

Zazwyczaj, aby uzyskać dostęp do elementów wewnętrznych komponentu,

korzysta się z selektorów takich jak :deep(.class-name), ale,

problemem jest sytuacja, gdy na jednym ekranie ten sam komponent musi być dostosowywany na różne sposoby,

a na innym ekranie należy zastosować ten sam styl.

Na przykład,

jeśli chcemy zmienić kolor tła komponentu tooltip z biblioteki Buefy, możemy użyć następującego kodu:

Ale co jeśli chcemy, aby jeden komponent miał tło czarne, a inny pomarańczowe?

Za każdym razem stosujemy nową klasę (nadpisanie CSS).

A jeśli chcemy użyć czarnego tooltipa na innym ekranie?

Kopiuje się i wkleja styl (lub używa się modułu).

Aby rozwiązać powyższe problemy, stworzyłem bardziej skalowalny komponent, jak pokazano poniżej.

Komponent jest skonstruowany w ten sposób.

Teraz, w komponencie nadrzędnym używamy custom-tooltip.vue.

Oprócz tej metody istnieją inne sposoby rozwiązania problemu.

- Tworzenie niestandardowych dyrektyw w celu rozszerzenia funkcjonalności

- Wykorzystanie zmiennych $variables do rozszerzenia motywu

Pomijając wiele szczegółów, w przypadku gdy komponent zawiera nie tylko style, ale również logikę i interfejsy API,

uważam, że takie opakowanie w komponent jest bardziej odpowiednie.

• Będę wdzięczny za wszelkie dodatkowe pomysły.