UI-Bibliothekskomponenten als skalierbare, gemeinsame Vue-Komponenten erstellen

Wenn man UI-Bibliotheken wie Bootstrap oder Vuetify verwendet,

kann man einfach hochwertige UI-Komponenten verwenden.

Manchmal stellt sich jedoch die Frage, wie man diese Komponenten anpassen kann.

Um auf interne Elemente einer Komponente zuzugreifen,

greift man oft auf :deep(.class-name) zurück, aber...

Das Problem ist, wenn man in einem Bildschirm dieselbe Komponente unterschiedlich anpassen muss,

und in einem anderen Bildschirm denselben Stil anwenden muss.

Zum Beispiel,

wenn man die Hintergrundfarbe der Buefy Tooltip-Komponente ändern möchte, kann man dies wie folgt tun.

Aber was ist, wenn man eine Komponente schwarz und eine andere orange machen möchte?

Man wendet immer wieder neue Klassen an. (CSS-Überschreibung)

Was ist, wenn man auch auf einem anderen Bildschirm einen schwarzen Tooltip verwenden möchte?

Man kopiert und fügt den Stil ein. (Oder man verwendet ein Modul.)

Um dieses Problem zu lösen, habe ich eine etwas skalierbarere Komponente wie folgt erstellt.

Es wird wie oben aufgebaut.

Nun verwendet man custom-tooltip.vue in der übergeordneten Komponente.

Es gibt noch viele andere Lösungsansätze.

- Erweiterung durch benutzerdefinierte Direktiven

- Erweiterung des Themas mit $variables

Viele Aspekte wurden ausgelassen, aber wenn mehrere Logiken oder APIs beteiligt sind, neben dem Stil,

denke ich, dass es besser ist, die Komponente so zu wrappen.

• Wenn Sie weitere gute Ideen haben, lassen Sie es mich bitte wissen.