一、完成伸缩菜单基本功能
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
