多级菜单字体颜色修复

Author: hu-snail

src/layouts/components/Menu/MenuItem.vue

@@ -18,7 +18,7 @@
  </span>
  </template>
  </el-menu-item>
- <el-sub-menu :index="item.path" v-else>
+ <el-sub-menu :class="{ 'is-black': isBlack }" :index="item.path" v-else>
  <template #title>
  <component
  class="menu-icon"
@@ -56,7 +56,14 @@
 </script>
 
 <script setup>
- import { defineProps } from 'vue';
+ import { defineProps, computed } from 'vue';
+ import { useStore } from 'vuex';
+
+ import { themeConfig } from '@/config/theme';
+ const { themeOptions } = themeConfig;
+
+ const whiteColors = ['#fff', '#ffffff', '#FFF', '#FFF', 'rgb(255, 255, 255)'];
+
  defineProps({
  item: {
  type: Object,
@@ -65,6 +72,20 @@
  },
  },
  });
+
+ const store = useStore();
+
+ const theme = computed(() => {
+ return store.getters['setting/theme'];
+ });
+
+ const menuBgColor = computed(() => {
+ return themeOptions[theme.value].menuBgColor;
+ });
+
+ const isBlack = computed(() => {
+ return whiteColors.indexOf(menuBgColor.value) === -1;
+ });
 </script>
 <style lang="scss" scoped>
  .menu-icon,

src/layouts/components/Menu/index.vue

@@ -18,7 +18,7 @@
  <Logo v-if="isLogo" />
  <template v-for="item in routes">
  <template v-if="!item.hidden">
- <MenuItem :item="item" :key="item.path" />
+ <MenuItem :item="{ ...item, isBlack }" :key="item.path" />
  </template>
  </template>
  </el-menu>

src/styles/element-reset.scss

@@ -52,12 +52,21 @@
  background-color: $base-color-primary !important;
  }
  }
+ .el-sub-menu__title{
+ color: $base-color-3 !important;
+ }
+ 
 }
 .el-menu--horizontal.is-black{
  .el-sub-menu__title{
  color: $base-color-white !important;
  }
 }
+.el-sub-menu.is-black{
+ .el-sub-menu__title{
+ color: $base-color-white !important;
+ }
+}
 .el-menu--collapse .el-menu-item{
  text-align: center;
 }