Transformer des composants de bibliothèque UI en composants Vue communs et extensibles

L'utilisation de bibliothèques UI telles que Bootstrap, Vuetify, etc.

permet d'utiliser facilement des composants UI de haute qualité.

Cependant, on se pose souvent la question de la personnalisation.

En général, pour accéder aux éléments internes d'un composant,

on utilise :deep(.class-name), mais le problème se pose lorsque l'on doit personnaliser le même composant différemment sur un même écran,

ou appliquer le même style sur un autre écran.

Par exemple,

si l'on veut changer la couleur d'arrière-plan du composant tooltip de Buefy, on peut utiliser le code suivant.

Mais que faire si l'on souhaite modifier un composant en noir et un autre en orange ?

On applique de nouvelles classes au cas par cas (surcharge CSS).

Et si l'on veut utiliser une info-bulle noire sur un autre écran ?

On copie-colle le style (ou on utilise un module).

Pour résoudre ce problème, j'ai créé un composant plus extensible comme suit.

Il est organisé comme indiqué ci-dessus.

Maintenant, utilisons custom-tooltip.vue dans le composant parent.

Il existe d'autres solutions.

- Créer une directive personnalisée pour l'étendre

- Utiliser $variables pour étendre le thème

J'ai omis beaucoup de détails, mais lorsque plusieurs logiques ou API sont impliquées en plus des styles,

je pense qu'il peut être plus approprié de les encapsuler dans un composant.

• N'hésitez pas à me faire part de vos suggestions.