Tema
- #Componentes comunes
- #Extensión de componentes
Si se utilizan bibliotecas de IU como Bootstrap, Vuetify, etc.
se pueden utilizar fácilmente componentes de IU de alta calidad.
Sin embargo, a menudo surge la duda de cómo personalizarlos.
Normalmente, para acceder a los elementos internos de un componente,
se suele acceder con :deep(.class-name), pero
el problema surge cuando se necesita personalizar el mismo componente de diferentes maneras en una misma pantalla,
o cuando se necesita aplicar el mismo estilo en otra pantalla.
Por ejemplo,
si se desea cambiar el color de fondo del componente tooltip de buefy, se puede utilizar lo siguiente.
¿Pero qué pasa si se quiere cambiar un componente a negro y otro a naranja?
Se aplica una nueva clase cada vez. (Sobrescritura de CSS)
¿Y si se quiere usar una tooltip negra en otra pantalla?
Se copia y pega el estilo. (O se utiliza un módulo).
Para solucionar este problema, se ha creado un componente más escalable de la siguiente manera.
Se configura de la manera descrita anteriormente.
Ahora, se utiliza custom-tooltip.vue en el componente padre.
Existen otros métodos para resolver este problema.
- Crear una directiva personalizada para extender la funcionalidad.
- Utilizar $variables para extender el tema.
Se han omitido muchas partes, pero cuando se incluyen varias lógicas o APIs además del estilo,
creo que encapsularlo en un componente de esta manera puede ser más adecuado.
- Agradecería que me hicieras saber si tienes alguna otra buena idea.
Comentarios0