vite+vue+ts+element-plus从零开发管理后台框架(09)-动态设置侧边栏和顶部左
获取菜单宽度
通过调试工具得知菜单展开时宽度为300px
编辑src/views/Main.vue
,设置菜单折叠。
<el-menu router :default-active="route.path" :collapse="true">
通过调试工具得知菜单折叠时宽度为64px
动态设置侧边栏和顶部左侧宽度
通过上面得知菜单展开时的宽度为
300px
,它有点太宽了,我们设置它的宽度为200px
。
编辑src/views/Main.vue
,script
段添加collapse
属性。
const menus = ref<IMenu[]>([])
const collapse = ref(true)
template
段侧边栏和菜单修改如下
<el-aside :width="collapse ? '64px' : '200px'">
<el-menu router :default-active="route.path" :collapse="collapse">
template
段header-left
修改如下
<div class="header-left" :style="{width: collapse ? '64px' : '200px'}">left</div>
style
段header-left
固定宽度删除
.header-left {
background-color: red;
}
测试
collapse
为true
即菜单折叠时
collapse
为false
即菜单展开时
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: