Создание масштабируемых общих Vue-компонентов из компонентов UI-библиотеки

Использование UI-библиотек, таких как Bootstrap, Vuetify, позволяет

легко использовать высококачественные компоненты UI.

Однако часто возникает вопрос, как их настраивать.

Обычно для доступа к внутренним элементам компонента используется

:deep(.class-name), но

проблема возникает, когда нужно настроить один и тот же компонент по-разному на одном экране,

а на другом экране применить тот же стиль.

Например,

если вы хотите изменить цвет фона компонента tooltip библиотеки Buefy, вы можете использовать следующий код.

Но что, если вы хотите изменить один компонент на черный, а другой на оранжевый?

Каждый раз применяется новый класс (переопределение CSS).

А если вам нужно использовать черный tooltip на другом экране?

Копируем и вставляем стиль (или используем модуль).

Для решения этой проблемы был создан более масштабируемый компонент, как показано ниже.

Он организован так.

Теперь используем custom-tooltip.vue в родительском компоненте.

Существуют и другие способы решения этой проблемы.

- Создание пользовательской директивы для расширения.

- Использование $variables для расширения темы.

Хотя многие части были пропущены, если включены различные логики или API, помимо стилей,

считаю, что обертывание в компонент может быть более подходящим.

• Если у вас есть другие хорошие идеи, сообщите мне, пожалуйста.