запуск изменения стиля на уровне приложения из дочернего компонента

#css #vue.js #vue-component #vuetify.js

#css #vue.js #vue-компонент #vuetify.js

Вопрос:

Когда я нахожусь в дочернем компоненте, я хотел бы изменить весь фон страницы (включая панель навигации приложения) на цвет, отличный от цвета по умолчанию.

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

Есть идеи, люди?

1. Используете ли вы значение Bool для переключения этого дочернего компонента? Или вы используете другой метод для активации дочернего компонента?

2. Я перехожу к дочернему компоненту с помощью маршрутизатора

Ответ №1:

Может быть, вам нужно Vuetify theme ? Тема может содержать набор цветов

https://vuetifyjs.com/en/customization/theme/

Вы можете изменить черно-белую тему, this.$vuetify.theme.dark = true/false в компоненте

1. но как тема меняет весь фон (включая панель навигации приложения) приложения? это изменит только контейнер. правильно?

2. @chaitanyam это зависит от того, как вы используете тему, вы можете использовать computed свойство для установки backgroundColor любого нужного вам элемента

Ответ №2:

Согласно вашему ответу на мой комментарий, это то, что вы, вероятно, хотите сделать: настройте хранилище Vuex и храните переменные с цветовыми кодами там. Таким образом, вы можете получить доступ к этим цветам отовсюду в вашем приложении. Затем в вашем приложении вы можете проверить текущий маршрут с помощью:

 this.$route

Таким образом, вы могли бы проверить, совпадает ли маршрут с маршрутом, на котором вы хотите изменить цвет.
Затем примените цвет ко всем элементам.

PS. Если вы хотите изменить только элементы, которые можно найти в app.vue, вам вообще не обязательно сохранять переменные в хранилище, но вы можете просто проверить свой маршрутизатор и назначить цвета соответствующим образом.

Надеюсь, это помогло вам!