1. 先上个效果图
这里我把控制菜单收缩的放在中间了,是可以随便调整的。
2. 问题思路想法
① 首先是布局,这就是个很经典的后台管理系统的容器页面,这里分为上下结构,上面一般放些系统logo、 登录的用户信息,还有一些小功能等等。然后下面又分为左右结构,左边就是我们的导航菜单,右边那一块儿是我们将来所有的业务页面存放的地方
② 上下结构布局好说,下面左右结构我们采用display:flex布局,但是问题就是宽度该怎么去设置,我们要实现菜单的收缩功能,宽度都是动态的变化的,右边也要随着左边的变动而改变,结论就是,我们给左边设置宽度为 width: auto,然后右边不设置宽度,直接让右边宽度填满剩下的右侧,即给右侧div设置flex: 1,这样布局基本就可以了
③ 第三就是给el-menu 设置 class="el-menu-vertical" :collapse="isCollapse" 属性,一个是class类名,我们一会儿需要用到(就是展开的时候的宽度) ,还一个是isCollapse,表示开启折叠动画
3. 完整代码实现
<doc>
容器页面
</doc>
<template>
<div class="main">
<div