其實(shí)這個(gè)應(yīng)該接在動(dòng)態(tài)表單Vue3寫一個(gè)后臺(tái)管理系統(tǒng)（4）RBAC權(quán)限受控體系的實(shí)現(xiàn)的下一節(jié)講的，當(dāng)時(shí)覺得這個(gè)功能挺簡(jiǎn)單的，但后來想想，竟然是從零用vue3開始寫一個(gè)后臺(tái)管理系統(tǒng)，所以還是要把這塊功能講清楚的。

最終效果

image.png

image.png

實(shí)現(xiàn)思路

思路很簡(jiǎn)單，就是通過點(diǎn)擊事件改變el-menu菜單的collapse屬性，及其左側(cè)menu菜單的寬度，

image.png

當(dāng)然這個(gè)還有一個(gè)伸縮動(dòng)畫，用transition去實(shí)現(xiàn)就行了

具體實(shí)現(xiàn)

樣式的改變總是由數(shù)據(jù)進(jìn)行驅(qū)動(dòng)，所以首先我們?nèi)?chuàng)建對(duì)應(yīng)的數(shù)據(jù)
創(chuàng)建 store/app 模塊，寫入如下代碼

export default {
  namespaced: true,
  state: () => ({
    sidebarOpened: true
  }),
  mutations: {
    triggerSidebarOpened(state) {
      state.sidebarOpened = !state.sidebarOpened
    }
  },
  actions: {}
}

在 store/index 中進(jìn)行導(dǎo)入

...
import app from './modules/app'
export default createStore({
  getters,
  modules: {
    ...
    app
  }
})

在 store/getters 中創(chuàng)建快捷訪問

sidebarOpened: state => state.app.sidebarOpened

創(chuàng)建 components/hamburger 組件，用來控制數(shù)據(jù)

<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 動(dòng)畫
    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 中指定 整個(gè)側(cè)邊欄的寬度和縮放動(dòng)畫

<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;

總結(jié)

到這里，左側(cè)菜單伸縮功能實(shí)現(xiàn)，很簡(jiǎn)單吧，因?yàn)榍皫灼恼挛覀兇蛘麄€(gè)框架都搭建完了，后面修修補(bǔ)補(bǔ)就很容易了，好了今天就到這里了，大家加油吧！