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.vuescript段添加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">

templateheader-left修改如下

<div class="header-left" :style="{width: collapse ? '64px' : '200px'}">left</div>

styleheader-left固定宽度删除

.header-left {
    background-color: red;
}

测试

collapsetrue即菜单折叠时

菜单折叠时

collapsefalse即菜单展开时

菜单展开时

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!