從同級路由器視圖組件中更改插入到 App.vue 中的 NavBar 的背景顏色

Question

我正在嘗試根據我所在的頁面更改導航欄組件的背景和文本顏色，以消除 colors 與當前頁面背景的對比。 有效地希望 TopNav 組件的明暗主題變體由我們當前所在的頁面觸發。

我的導航欄和頁面模板如下：

<template>
  <v-app>
    <TopNav />          ------> This is the navbar component whos css i want to alter
    <v-content>   
      <router-view></router-view>    -----> Depending on what the current page injected is.
    </v-content>
    <Footer />
  </v-app>
</template>

使用不帶scoped屬性的<style>標記可以更改導航欄背景，但不幸的是，它在導航到另一個頁面后不會恢復。

Answer 1

從兄弟級或子級組件更改組件的 state 確實是一種反模式。

你最好的選擇是使用一個完善的模式來獲得你所追求的功能。

一種方法是引入 Vuex，並將您的亮/暗模式放在 Vuex 商店中（共享應用程序級別 state 管理）然后，您可以設置 TopNav 組件以綁定到 Vuex state 中的值（ this.$store.state.darkMode例如）然后，您可以從應用程序中的任何位置提交突變以指定亮模式、暗模式、切換等...

或者，如果您希望它始終是特定於路由的（有點像這種情況），那么您可以設置您的路由定義，如下所示：

const routes = [
  {
    path: '/light-component',
    name: 'LightComponent',
    component: () => LightComponent,
    meta: {
      darkMode: false,
    },
  },
  {
    path: '/dark-component',
    name: 'DarkComponent',
    component: () => DarkComponent,
    meta: {
      darkMode: true,
    },
  },
];

然后，在任何組件（例如您的 TopNav 組件）中，您可以執行以下操作：

<template>
  <div :class="darkModeClass">

...

// inside <script> ...

computed: {
  darkModeClass() {
    return { dark: !!this.$route.meta?.darkMode };
  }
}

...

<style scoped>
  .dark {
    /* css styles for dark mode */
  }
</style>
  

Answer 2

這是一個插件，它為每個組件添加了一個$dark屬性，持有一個名為mode的反應性道具（現在我想到了，我可以將它命名為side 。或者可能將它們重命名為$darth.vader :)...

我已經用 ts 編寫了它，因為它可以很容易地轉譯為 js，但反過來不行：

插件/darkMode.ts

import Vue, { VueConstructor } from 'vue';

// private store
const mode = Vue.observable({ dark: false });

export default {
  install(Vue: VueConstructor) {
    Vue.prototype.$dark = {
      mode: {
        get: function(): boolean { return mode.dark },
        set: function(value: boolean) { mode.dark = value }
      }
    }
  }
}

main.ts

import darkMode from './plugins/darkMode';

Vue.use(darkMode);

而已。 現在每個組件都有一個響應式$dark.mode 。

但是，要在路由器中使用它，您需要先從main.ts導出它。

只需new App(...).$mount('#app')前加上解構的const導出：

export const { $dark } = new App(...).$mount('#app');

並且，在

路由器/index.ts

import { $dark } from '@/main';

router.afterEach((to, from) => {
  // replace with your logic...
  $dark.mode = ['Home', 'Some other page'].includes(to.name);
})

您還需要將其類型添加到 Vue：

墊片-darkMode.d.ts

import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $dark: { mode: boolean };
  }
}

在任何組件中：

<your-element :class="{'dark-mode': $dark.mode }" />