Criando componentes Vue comuns e expansíveis a partir de componentes de biblioteca UI

Usando bibliotecas de UI como Bootstrap, Vuetify, etc.,

é possível usar componentes de UI de alta qualidade facilmente.

No entanto, frequentemente surge a dúvida de como personalizá-los.

Normalmente, para acessar elementos internos de um componente,

acessamos usando :deep(.class-name), mas o problema surge quando precisamos customizar o mesmo componente de maneiras diferentes em uma mesma tela,

ou quando precisamos aplicar o mesmo estilo em outra tela.

Por exemplo,

se quisermos mudar a cor de fundo do componente tooltip do Buefy, podemos usar o seguinte código:

Mas e se quisermos um componente com cor preta e outro com cor laranja?

Aplicamos uma nova classe a cada vez. (Sobrescrita de CSS)

E se quisermos usar a tooltip preta em outra tela?

Copiamos e colamos o estilo. (Ou usamos um módulo).

Para resolver esses problemas, criamos um componente mais escalável, como mostrado abaixo.

É construído da maneira acima.

Agora, usamos custom-tooltip.vue no componente pai.

Existem várias outras maneiras de resolver esse problema.

- Criando diretivas personalizadas para expandir

- Usando \$variables para expandir o tema

Embora muitas partes tenham sido omitidas, quando vários lógicas ou APIs estão incluídas, além do estilo,

parece que embrulhar dessa forma em um componente pode ser mais adequado.

• Se você tiver outras boas ideias, por favor, compartilhe-as. Agradecemos!