实现后台系统左侧菜单栏的展开和收缩

效果图

关键点： 通过仓库中的fold属性来控制图标（展开/收缩）的变换，以及各部分宽度的变换

左边菜单栏部分

<el-aside
  class="layout_slider"
  :class="{ fold: LayOutSettingStore.fold ? true : false }"
>
</el-aside>

右边部分，包括面包屑导航栏和main展示区域

<el-container class="layout_right_main">
  <!-- 顶部导航 -->
  <el-header
    class="layout_head"
    :class="{ fold: LayOutSettingStore.fold ? true : false }"
  >
    <!-- 顶部左侧静态 -->
  <el-icon style="margin-right: 10px" @click="changeIcon">
    <component :is="LayOutSettingStore.fold ? 'Fold' : 'Expand'"></component>
  </el-icon>
  <!-- 左侧面包屑 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>subpage</el-breadcrumb-item>
  </el-breadcrumb>
  </el-header>
  <!-- main内容展示区域 -->
  <el-main
    class="layout_main"
    :class="{ fold: LayOutSettingStore.fold ? true : false }"
  >
    <!-- 路由出口,封装成组件是为了加上过渡动画  -->
    <Main></Main>
    <!-- <router-view></router-view> -->
  </el-main>
</el-container>
</el-container>

<script setup lang="ts">

import useLayOutSettingStore from '@/store/modules/setting'
//获取layout配置相关的仓库
let LayOutSettingStore = useLayOutSettingStore()

//点击图标的方法
const changeIcon = () => {
  //图标进行切换
  LayOutSettingStore.fold = !LayOutSettingStore.fold
}
</script>

useLayOutSettingStore仓库

//layout组件相关配置
import { defineStore } from 'pinia'

const useLayOutSettingStore = defineStore('SettingStore', {
  state: () => {
    return {
      fold: false, //用于控制菜单折叠/收起
    }
  },
})

export default useLayOutSettingStore

<style>
.layout_slider {
 
    color: #fff;
    width: 260px;
    height: 100vh;
    transition: all 0.3s;

    &.fold {
      width: 75px;
    }

    .scrollbar {
      height: calc(100vh - $50px);
      width: 100%;

      .el-menu {
        border-right: none;
      }
    }
  }

  .layout_right_main {
  
    .layout_head {
      //加上折叠的过渡动画
      transition: all 0.3s;
      &.fold {
        width: calc(100vw - 75px);
      }
    }

    .layout_main {
      //加上折叠的过渡动画
      transition: all 0.3s;
      &.fold {
        width: calc(100vw - 75px);
      }
    }
    
  } //.layout_right_main
</style>