vite+vue+ts+element-plus从零开发管理后台框架(10)-菜单展开折叠状态切换
顶部 center 添加图标
编辑src/views/Main.vue
,template
段header-center
修改如下。即折叠状态显示expand
图标,展开状态显示fold
图标,并使用size
属性设置了图标大小。
<div class="header-center">
<el-icon size="22" style="margin-left: 15px;">
<expand v-if="collapse" />
<fold v-else />
</el-icon>
</div>
style
段header-center
修改如下,即取消了背景色,使用flex
布局。
.header-center {
flex-grow: 1;
display: flex;
align-items: center;
}
图标添加点击事件动态切换
编辑src/views/Main.vue
,script
段添加点击回调函数。
onMounted(() => {
const [genMenus, _genRoutes] = MenuUtil.gen(1)
menus.value = genMenus
})
const onCollapseSwitch = () => {
collapse.value = !collapse.value
}
修改template
段图标属性,添加点击事件回调。
<div class="header-center">
<el-icon size="22" style="margin-left: 15px;" @click="onCollapseSwitch">
<expand v-if="collapse" />
<fold v-else />
</el-icon>
</div>
效果
菜单展开
菜单折叠
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: