feat(menu): 移动端未折叠情况下自动收起菜单

This commit is contained in:
Yanbowen 2021-11-15 10:57:44 +08:00
parent 0a9fba90b5
commit 0d6cff2a7a

View File

@ -33,6 +33,7 @@ import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { NLayoutSider, NScrollbar, NMenu } from 'naive-ui'; import { NLayoutSider, NScrollbar, NMenu } from 'naive-ui';
import type { MenuOption } from 'naive-ui'; import type { MenuOption } from 'naive-ui';
import { useIsMobile } from '@/hooks/common';
import { useThemeStore, useAppStore } from '@/store'; import { useThemeStore, useAppStore } from '@/store';
import { menus } from '@/router'; import { menus } from '@/router';
import { GlobalMenuOption } from '@/interface'; import { GlobalMenuOption } from '@/interface';
@ -51,6 +52,7 @@ const theme = useThemeStore();
const app = useAppStore(); const app = useAppStore();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const { isMobile } = useIsMobile();
const { handleMenuCollapse } = useAppStore(); const { handleMenuCollapse } = useAppStore();
const inverted = computed(() => { const inverted = computed(() => {
@ -65,6 +67,19 @@ const menuWidth = computed(() => {
return collapsed ? collapsedWidth : modeWidth; return collapsed ? collapsedWidth : modeWidth;
}); });
watch(
isMobile,
val => {
/** 未折叠 */
if (!app.menu.collapsed) {
handleMenuCollapse(val);
}
},
{
immediate: true
}
);
const activeKey = computed(() => route.name as string); const activeKey = computed(() => route.name as string);
const expandedKeys = ref<string[]>(getExpendedKeys()); const expandedKeys = ref<string[]>(getExpendedKeys());