vite+vue+ts+element-plus从零开发管理后台框架(10)-菜单展开折叠状态切换

顶部 center 添加图标

编辑src/views/Main.vuetemplateheader-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>

styleheader-center修改如下,即取消了背景色,使用flex布局。

.header-center {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

图标添加点击事件动态切换

编辑src/views/Main.vuescript段添加点击回调函数。

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 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

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