Schaalbare, algemene Vue-componenten maken van UI-bibliotheekcomponenten

Als je UI-bibliotheken zoals Bootstrap en Vuetify gebruikt,

kun je eenvoudig hoogwaardige UI-componenten gebruiken.

Maar soms vraag je je af hoe je ze moet aanpassen.

Meestal gebruik je :deep(.class-name) om toegang te krijgen tot elementen binnen een component, maar...

het probleem is dat je op één scherm dezelfde componenten op verschillende manieren moet aanpassen,

en op een ander scherm dezelfde stijl moet toepassen.

Bijvoorbeeld,

als je de achtergrondkleur van de tooltip-component van Buefy wilt wijzigen, kun je dit als volgt doen.

Maar wat als je de ene component zwart en de andere oranje wilt maken?

Je past telkens een nieuwe klasse toe. (CSS-override)

En als je op een ander scherm ook een zwarte tooltip wilt gebruiken?

Je kopieert en plakt de stijl. (Of je gebruikt een module.)

Om dit probleem op te lossen, hebben we een schaalbaardere component als volgt samengesteld.

Het is als volgt samengesteld.

Nu gebruiken we custom-tooltip.vue in de bovenliggende component.

Er zijn nog andere oplossingen.

- Een aangepaste directive maken om uit te breiden

- Het thema uitbreiden met behulp van $variables

Hoewel veel aspecten zijn weggelaten, denk ik dat het wrappen in een component geschikter kan zijn als er naast stijlen ook logica of API's betrokken zijn.

• Laat het me weten als je andere goede ideeën hebt. Bedankt!