其实这个应该接在动态表单Vue3写一个后台管理系统（4）RBAC权限受控体系的实现的下一节讲的，当时觉得这个功能挺简单的，但后来想想，竟然是从零用vue3开始写一个后台管理系统，所以还是要把这块功能讲清楚的。
最终效果
image.png
image.png
实现思路
思路很简单，就是通过点击事件改变el-menu菜单的collapse属性，及其左侧menu菜单的宽度，
image.png
当然这个还有一个伸缩动画，用transition去实现就行了
具体实现
样式的改变总是由数据进行驱动，所以首先我们去创建对应的数据
创建 store/app 模块，写入如下代码
export default {
namespaced: true,
state: () => ({
sidebarOpened: true
}),
mutations: {
triggerSidebarOpened(state) {
state.sidebarOpened = !state.sidebarOpened
}
},
actions: {}
}
在 store/index 中进行导入
...
import app from './modules/app'
export default createStore({
getters,
modules: {
...
app
}
})
在 store/getters 中创建快捷访问
sidebarOpened: state => state.app.sidebarOpened
创建 components/hamburger 组件，用来控制数据
<template>
<div class="hamburger-container" @click="toggleClick">
<svg-icon class="hamburger" :icon="icon"></svg-icon>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const toggleClick = () => {
store.commit('app/triggerSidebarOpened')
}
const icon = computed(() =>
store.getters.sidebarOpened ? 'hamburger-opened' : 'hamburger-closed'
)
</script>
<style lang="scss" scoped>
.hamburger-container {
padding: 0 16px;
.hamburger {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
}
</style>
在 navbar 中使用该组件
<template>
<div class="navbar">
<hamburger class="hamburger-container" />
...
</div>
</template>
<script setup>
import Hamburger from '@/components/Hamburger'
...
</script>
<style lang="scss" scoped>
.navbar {
...
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
// hover 动画
transition: background 0.5s;
&:hover {
background: rgba(0, 0, 0, 0.1);
}
}
...
}
</style>
在 SidebarMenu 中，控制 el-menu 的 collapse 属性
<el-menu
:collapse="!$store.getters.sidebarOpened"
...
在 layout/index 中指定 整个侧边栏的宽度和缩放动画
<div
class="app-wrapper"
:class="[$store.getters.sidebarOpened ? 'openSidebar' : 'hideSidebar']"
>
...
在 layout/index 中 处理 navbar 的宽度
<style lang="scss" scoped>
...
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$sideBarWidth});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - #{$hideSideBarWidth});
}
</style>
在 styles/variables.scss 中指定 hideSideBarWidth
$hideSideBarWidth: 54px;
总结
到这里，左侧菜单伸缩功能实现，很简单吧，因为前几篇文章我们打整个框架都搭建完了，后面修修补补就很容易了，好了今天就到这里了，大家加油吧！
