一、完成伸缩菜单基本功能

1.在component文件夹下面创建一个文件夹container，然后在container下创建src文件，再在src下创建index.vue文件
2.在element-plus官网找到Container布局容器，选择合适的布局容器，复制代码到index.vue中

container布局.png

3.重新配置路由
在router文件夹下的index.ts中,引入Container并使用

import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue"
import Container from "../components/container/src/index.vue"
const routes:RouteRecordRaw[] = [
    {
        path:'/',
        component:Container,
        //让所有页面都是Container的子路由
        children:[
            {
                path:'/',
                component:Home
            }
        ]
    }
]
const router = createRouter({
    routes,
    history:createWebHistory()
})

export default router

4.index.vue中，主题内容不能写死，为

<router-view></router-view>

5.左侧侧边栏开发
去官网找到menu部分，选择合适的侧边栏
复制粘贴需要的代码

menu.png

6.高度自动撑满
在App.vue中，style样式下

html,body,#app,.el-container,.el-menu{
    height: 100%;

}

7.实现是否收缩
(1)在侧边栏加上属性

:collapse="isCollapse"

(2)在script中定义isCollapse

let isCollapse = ref(true)

(3)伸缩图标

<span @click="toggle">
                <el-icon-expand v-if="isCollapse"></el-icon-expand>
                <el-icon-fold v-else></el-icon-fold>
            </span>

(4)toggle事件

const toggle = ()=>{
    isCollapse.value=!isCollapse.value
}

8.侧边栏宽度变化
添加属性

width="auto"

若是不收缩，给el-menu

class="el-menu-vertical-demo"

然后定义样式（通过not选择器来设置未收缩时的宽度）

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

9.完整index.vue代码

<template>
   <el-container>
       <el-aside width="auto">
           <el-menu
               :collapse="isCollapse"
               default-active="2"
               class="el-menu-vertical-demo"
           >   
               <el-menu-item index="1">
                   <el-icon><el-icon-menu /></el-icon>
                   <span>导航1</span>
               </el-menu-item>
               <el-menu-item index="2">
                   <el-icon><el-icon-menu /></el-icon>
                   <span>导航2</span>
               </el-menu-item>
               <el-menu-item index="3">
                   <el-icon><el-icon-menu /></el-icon>
                   <span>导航3</span>
               </el-menu-item>
           </el-menu>
     </el-aside>
     <el-container>
       <el-header>
           <span @click="toggle">
               <el-icon-expand v-if="isCollapse"></el-icon-expand>
               <el-icon-fold v-else></el-icon-fold>
           </span>
       </el-header>
       <el-main>
           <router-view></router-view>
       </el-main>
     </el-container>
   </el-container>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
let isCollapse = ref(true)
const toggle = ()=>{
   isCollapse.value=!isCollapse.value
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
 width: 200px;
}
</style>

10.完成的页面

菜单1.png 菜单2.png

二、抽离头部和侧边栏组件并完善伸缩菜单

1.在component/Container/src下新建一个navHeader和navSide目录，在这两个目录下新建index.vue文件，将对应侧边和头部的代码抽离出来放入对应的文件，然后在原来的文件下引入并使用
2.两个抽离出来的组件都需要用到isCollapse，可在组件中引入

<nav-side :collapse="isCollapse"></nav-side>
<nav-header v-model:collapse="isCollapse"></nav-header>

然后在各自的index.vue文件下写入

let props = defineProps<{
    collapse:boolean
}>()

3.在header部分修改显示部分

let emits = defineEmits(['update:collapse'])
const toggle = ()=>{
   //需要修改父组件的数据
   emits('update:collapse',!props.collapse)
}

代码中对应需要改变的地方要改
4.完整代码
(1)component/container/src/index.vue

<template>
    <el-container>
        <el-aside width="auto">
            <nav-side :collapse="isCollapse"></nav-side>
        </el-aside>
      <el-container>
        <el-header>
            <nav-header v-model:collapse="isCollapse"></nav-header>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import NavHeader from "./navHeader/index.vue";
import NavSide from "./navSide/index.vue";
let isCollapse = ref(true)
</script>

<style lang="scss" scoped>
.el-header{
    padding: 0;
    border-bottom: 1px solid #eee;
}
</style>

(2)component/container/src/navSide/index.vue

<template>
     <el-menu
                :collapse="collapse"
                default-active="2"
                class="el-menu-vertical-demo"
            >   
                <el-menu-item index="1">
                    <el-icon><el-icon-menu /></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon><el-icon-menu /></el-icon>
                    <span>图标选择器</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon><el-icon-menu /></el-icon>
                    <span>趋势标记</span>
                </el-menu-item>
            </el-menu>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
let props = defineProps<{
    collapse:boolean
}>()
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>

(3)component/container/src/navHeader/index.vue

<template>
    <div class="header">
       <span @click="toggle">
                <el-icon-expand v-if="collapse"></el-icon-expand>
                <el-icon-fold v-else></el-icon-fold>
        </span> 
    </div>   
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
let props = defineProps<{
    collapse:boolean
}>()
let emits = defineEmits(['update:collapse'])
const toggle = ()=>{
   //需要修改父组件的数据
   emits('update:collapse',!props.collapse)
}
</script>

<style lang="scss" scoped>
.header{
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
</style>

5.完成界面

菜单3.png 菜单4.png