Vue3写一个后台管理系统（7）左侧菜单伸缩功能实现

其实这个应该接在动态表单Vue3写一个后台管理系统（4）RBAC权限受控体系的实现的下一节讲的，当时觉得这个功能挺简单的，但后来想想，竟然是从零用vue3开始写一个后台管理系统，所以还是要把这块功能讲清楚的。

最终效果

实现思路

思路很简单，就是通过点击事件改变el-menu菜单的collapse属性，及其左侧menu菜单的宽度，

当然这个还有一个伸缩动画，用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;

总结

到这里，左侧菜单伸缩功能实现，很简单吧，因为前几篇文章我们打整个框架都搭建完了，后面修修补补就很容易了，好了今天就到这里了，大家加油吧！