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