fix(projects): fix vertical-menu will not render when the layout is from mobile

This commit is contained in:
Soybean 2024-07-22 19:01:53 +08:00
parent 4e55b0e9bd
commit 840273474f

View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import type { Component } from 'vue'; import type { Component } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme'; import { useThemeStore } from '@/store/modules/theme';
import VerticalMenu from './modules/vertical-menu.vue'; import VerticalMenu from './modules/vertical-menu.vue';
import VerticalMixMenu from './modules/vertical-mix-menu.vue'; import VerticalMixMenu from './modules/vertical-mix-menu.vue';
@ -12,6 +13,7 @@ defineOptions({
name: 'GlobalMenu' name: 'GlobalMenu'
}); });
const appStore = useAppStore();
const themeStore = useThemeStore(); const themeStore = useThemeStore();
const activeMenu = computed(() => { const activeMenu = computed(() => {
@ -24,10 +26,12 @@ const activeMenu = computed(() => {
return menuMap[themeStore.layout.mode]; return menuMap[themeStore.layout.mode];
}); });
const reRenderVertical = computed(() => themeStore.layout.mode === 'vertical' && appStore.isMobile);
</script> </script>
<template> <template>
<component :is="activeMenu" /> <component :is="activeMenu" :key="reRenderVertical" />
</template> </template>
<style scoped></style> <style scoped></style>