Creare componenti Vue comuni ed estensibili da componenti di librerie UI

Utilizzando librerie UI come Bootstrap, Vuetify, ecc.

è possibile utilizzare facilmente componenti UI di alta qualità.

Tuttavia, spesso ci si chiede come personalizzarli.

Generalmente, per accedere agli elementi interni di un componente,

si usa :deep(.class-name), ma il problema si presenta quando si deve personalizzare lo stesso componente in modo diverso all'interno della stessa schermata,

o quando si deve applicare lo stesso stile in un'altra schermata.

Ad esempio,

se si desidera modificare il colore di sfondo del componente tooltip di Buefy, si può utilizzare il seguente codice.

Ma cosa succede se si vuole cambiare un componente in nero e un altro in arancione?

Si applica di volta in volta una nuova classe (override CSS).

E se si desidera utilizzare un tooltip nero anche in un'altra schermata?

Si copia e incolla lo stile (oppure si usa un modulo).

Per risolvere questo problema, ho creato un componente più scalabile, come mostrato di seguito.

È strutturato come sopra.

Ora, si utilizza custom-tooltip.vue nel componente padre.

Esistono altri modi per risolvere questo problema.

- Creare una direttiva personalizzata per l'estensione

- Utilizzare $variables per estendere il tema

Anche se molte parti sono state omesse, se sono inclusi più logiche o API oltre allo stile,

penso che avvolgerli in un componente potrebbe essere più appropriato.

• Se avete altre buone idee, per favore fatemi sapere.