【vue3】侧边栏功能的实现

前言

很多项目中都有侧边栏，记录下实现侧边栏伸缩和展开的实现过程以及一些优化细节。
最终实现效果如图所示：

整体布局 layout.vue

<template>
  <el-container>
    <!--  头部   -->
    <el-header>
      <f-header></f-header>
    </el-header>
    <el-container>
     <!--  侧边栏   -->
      <el-aside>
        <f-menu></f-menu>
      </el-aside>
      <el-main>
        <f-tag-list></f-tag-list>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

实现过程

实现侧边栏的收缩和展开需要时刻知道控制收缩的状态，涉及到的组件也多，使用到vuex。

初始值

在 state 里定义一个侧边栏宽度,以及修改侧边栏宽度的方法

state() {
  return {
    //侧边宽度
    asideWidth: '250px'
  }
},
mutations: {
  //展开 缩起侧边
  handleAsideWidth(state) {
     state.asideWidth = state.asideWidth == '250px' ? '64px' : '250px'
  }
},

控制收缩/展开侧边栏

组件里的【收缩/展开图标】处进行点击事件切换,进行侧边栏的收缩和展开

在侧边栏组件 里绑定设置的侧边栏宽度

实现效果：

现在就是实现了伸缩和展开的效果，但是发现会有一闪一闪的情况，因为是el-menu本身的动画效果太慢了，文档也没有提供可以修改动画时长的参数，所以在 el-menu 取消动画效果，给最外层的 div的 class .f-menu 添加一个动画效果。

以上的实现效果刚刚好，注意底部会出现一瞬间的滚动条，原因是在最外层设置的 overflow:auto 导致的，解决方法

把 overflow: auto; 
改为：
overflow-y: auto;
overflow-x: hidden;

最后，再去 layout.vue 里设置下 el-aside 的宽度,并为 el-aside 添加动画效果，看上去不那么僵硬

最终实现效果：