<!-- 纵向布局 -->
<template><el-container class="layout m-layout"><el-aside><div class="aside-box" :style="{ width: isCollapse ? '65px' : asideWidth + 'px' }"><div class="logo flx-center"><img class="logo-img" src="@/assets/images/logo.png" alt="logo" /><span v-show="!isCollapse" class="logo-text">{{ title }}</span></div><el-scrollbar><el-menu:router="false":default-active="activeMenu":collapse="isCollapse":unique-opened="accordion":collapse-transition="false"><SubMenu :menu-list="menuList" /></el-menu></el-scrollbar></div><div class="m-drag" @mousedown="startResizing"></div></el-aside><el-container><el-header><ToolBarLeft /><ToolBarRight /></el-header><Main /></el-container></el-container>
</template><script setup lang="ts" name="layoutVertical">
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";const title = import.meta.env.VITE_GLOB_APP_TITLE;const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);const asideWidth = ref<number>(210);
let isResizing = false;
let startX = 0;
let startWidth = 0;const startResizing = (event: MouseEvent) => {isResizing = true;startX = event.clientX;startWidth = asideWidth.value;document.addEventListener("mousemove", resizeAside);document.addEventListener("mouseup", stopResizing);
};const resizeAside = (event: MouseEvent) => {if (isResizing) {const newWidth = startWidth + (event.clientX - startX);asideWidth.value = newWidth > 50 ? newWidth : 50; // 设置最小宽度为 50px}
};const stopResizing = () => {isResizing = false;document.removeEventListener("mousemove", resizeAside);document.removeEventListener("mouseup", stopResizing);
};onMounted(() => {document.addEventListener("mouseup", stopResizing);
});onUnmounted(() => {document.removeEventListener("mouseup", stopResizing);
});
</script><style scoped lang="scss">
@import "./index.scss";
</style>
