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.menuList
const 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>