UI könyvtár komponensek skálázható, közös Vue komponensként való létrehozása

Ha Bootstrap, Vuetify vagy más UI könyvtárakat használunk,

könnyen használhatunk magas minőségű UI komponenseket.

Azonban gyakran felmerül a kérdés, hogy hogyan lehet ezeket testreszabni.

Általában a komponens belső elemeihez való hozzáféréshez

`:deep(.class-name)`-hez hasonló módon férünk hozzá, de

a probléma akkor jelentkezik, ha ugyanazon komponensnek különböző testreszabásokra van szükség egy képernyőn belül,

vagy ha ugyanazt a stílust kell alkalmazni egy másik képernyőn.

Például,

ha a buefy tooltip komponensének háttérszínét szeretnénk megváltoztatni, akkor az alábbiak szerint tehetjük meg.

De mi van akkor, ha az egyik komponensnek fekete, a másiknak narancssárga háttérszínt szeretnénk adni?

Minden alkalommal új osztályt kell hozzáadni. (CSS felülírás)

És ha egy másik képernyőn is fekete tooltip-ot szeretnénk használni?

Másoljuk-beillesztjük a stílust. (Vagy modult használunk.)

A fenti probléma megoldására egy kicsit skálázhatóbb komponenseket hoztam létre az alábbiak szerint.

Így alakítjuk ki.

Most már a szülő komponensben használjuk a custom-tooltip.vue-t.

Más megoldások is léteznek.

- Egyéni direktíva létrehozása és bővítése

- A $variables használatával bővíthető téma

Sok mindent kihagytam, de ha sok logika vagy API is szerepel, akkor

szerintem jobb lehet a komponensbe burkolás.

• Ha van jobb ötlete, kérjük, ossza meg velünk!