18、springboot3 vue3开发平台-前端-菜单折叠实现

1. 左侧菜单折叠

2. 实现

src\views\layout\Header.vue

	<!-- 折叠按钮--><div class="div-item"  @click="toggleCollapse()"><el-icon :size="22" v-show="!isMenuOpen"><Fold /></el-icon><el-icon :size="22" v-show="isMenuOpen"><Expand /></el-icon></div>// 折叠按钮处理
const emits = defineEmits(['parentClick'])
const isMenuOpen = ref(false);
const toggleCollapse = () => {isMenuOpen.value = !isMenuOpen.value//console.log(isMenuOpen.value);emits('parentClick', isMenuOpen.value)
}

src\views\layout\Aside.vue

<template><div class="menu-container"><div class="up-title" v-if="!isCollapse"><!-- <div><svg-icon name="" width="20px" height="20px" /></div> --><div class="title-text">{{ !isCollapse ? "Vue3 boot3 快速开发平台" : "" }}</div></div><div class="down-menu"><el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true" :collapse-transition="false"><MenuTree :menuList="menuList"></MenuTree></el-menu></div></div>
</template><script setup  lang="ts">
import { onMounted} from 'vue'
//渲染菜单的组件
import MenuTree from "@/components/menuTree/index.vue"
import { useMenuStore } from '@/stores/menu.js'
import { useRoute } from 'vue-router'const menuStore = useMenuStore()
const route = useRoute()// 获取pinia的缓存的菜单数据
const menuList = menuStore.menuListconst props = defineProps({isCollapse: Boolean
})</script><style lang="scss">
.menu-container {display: flex;flex-direction: column;height: 100vh;.up-title {display: flex;flex-direction: row;justify-content: center;align-items: center;height: 5vh;// padding: 3px;/* 内边距 */border-bottom: 2px solid;border-right: 1px solid;/* 设置下边框宽度和样式 */border-color: #f5f5f5;.title-text {display: inline-block;vertical-align: middle;/* 文字与图片垂直居中对齐 */font-weight: bold;/* 加粗文字 */font-size: 13px;margin-left: 5px;}}.down-menu {flex-grow: 1;}
}.el-menu-vertical-demo {height: 100%;overflow: auto;
}
</style>

src\views\layout\Layout.vue

<template><el-container style="height: 100vh"><el-aside width="auto"><el-scrollbar><LeftLayout :isCollapse='isCollapse' /></el-scrollbar></el-aside><el-container><el-header style="height: 5vh; padding: 0 5px 0 5px"><Header @parentClick='parentClick' /></el-header><el-main style="padding: 0;"><MainView /></el-main><el-footer style="height: 3vh; padding: 0;"><Footer/></el-footer></el-container></el-container>
</template><script setup lang="ts">
import LeftLayout from './Aside.vue'
import Header from './Header.vue'
import MainView from './MainView.vue'
import Footer from './Footer.vue'import { ref } from 'vue'
const isCollapse = ref<any>(false)
const parentClick = (isCollapseValue: any) => {isCollapse.value = isCollapseValue
}
</script><style lang="scss" scoped>
</style>