vue3 + element-plus实现侧边导航栏

背景知识

侧边导航栏一般用在后台管理系统中，我们用element–plus更容易实现

基本布局

 我们可以去 element–plus 官网找布局的容器组件，网址：Container 布局容器 | Element Plus

我们一般选择这个来布局侧边导航栏

Menu菜单

再去 element–plus 官网找菜单的组件，网址：Menu 菜单 | Element Plus

我们选择垂直导航菜单，后台管理系统彩带一般都可以被折叠，通过绑定一个变量来设定当前是否展开或关闭

具体代码

App.vue

<template>
  <div class="common-layout">
    <el-container>
        <el-aside class="side"  width="collapse"&gt;
          <!-- 侧边栏 --&gt;
          <NarBar ref="narbar"/&gt;
        </el-aside&gt;
      <el-container&gt;
        <el-header height="125px"&gt;
                 <!-- 头部 --&gt;
          <el-card class="box-card" >
            <HeaderContent ref="headerContent" @updateNarBar="updateNarBar"/>
          </el-card>
        </el-header>
        <el-main>
              <!-- 内容 -->
              <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import NarBar from './components/NarBar.vue';
import HeaderContent from './components/HeaderContent.vue';

import { ref } from 'vue';
const narbar = ref(null);

const updateNarBar = () => {
    narbar.value.isCollapse = !narbar.value.isCollapse;
}

</script>

<style>
*{
  padding: 0%;
  margin: 0%;
}
</style>

引入的 NarBar.vue 源码：

<template>
    <el-menu
      default-active="2"
      class="el-menu-vertical"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
    <el-menu-item index="1" class="titleName">
          <el-icon><Management /></el-icon>
          <template #title>图书借阅管理</template>
    </el-menu-item>

      <el-sub-menu index="2" class="menu">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>图书信息维护</span>
        </template>
          <el-menu-item index="1-1" class="menu" @click="$emit('addTab','LibrarySortEnter','图书分类录入')">图书分类录入</el-menu-item>
          <el-menu-item index="1-2" class="menu" @click="$emit('addTab','StorePositionEnter','存放位置录入')">存放位置录入</el-menu-item>
          <el-menu-item index="1-3" class="menu">图书录入</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="3" class="menu">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>会员信息维护</span>
        </template>
          <el-menu-item index="2-1" class="menu">会员表</el-menu-item>
      </el-sub-menu>
      
      <el-sub-menu index="4" class="menu">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>图书信息维护</span>
        </template>
          <el-menu-item index="3-1" class="menu">图书借阅单</el-menu-item>
          <el-menu-item index="3-2" class="menu">借阅明细</el-menu-item>
          <el-menu-item index="3-3" class="menu">图书归还单</el-menu-item>
      </el-sub-menu>



    </el-menu>
  </template>
  
  <script setup>
  import { ref,defineExpose } from 'vue'
  import { Management } from '@element-plus/icons-vue'

   const isCollapse = ref(false)
  
   const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
  }
   const handleClose = (key, keyPath) => {
    console.log(key, keyPath);
  }

  defineExpose({
    isCollapse,
})
  </script>
  
  <style scoped>
  .el-menu-vertical,.el-menu-vertical:not(.el-menu--collapse){
    height: 100vh;
  }
  .titleName{
    font-size: 24px;
    font-weight: 600;
  }
  .menu{
  font-size: 14px;

  }
  </style>
  

引入的 HeaderContent.vue 源码

<template>
     <div class="header_toolbars">
              <el-icon  class="closeMenu left" :size="16" 
              @click="$emit('updateNarBar')"><Fold /></el-icon>
              <span class="welcome left" >欢迎进入图书借阅系统</span>
              <!-- <el-icon  class="setting right"
          ><setting/></el-icon> -->
      </div>
     
</template>

<script setup>
import { Fold } from '@element-plus/icons-vue'


</script>


<style scoped>
.welcome{
    display: inline-block;
    color: rgb(166,153,153);
    font-size: 18px;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.header_toolbars{
    line-height: 64px;
    height: 64px;
}
.toolbar_left{
    text-align: left;
}
.toolbar_right{
    text-align: right;
}
.setting:hover{
    background-color: rgb(246,246,246);
    cursor: pointer;
}
.tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
  .closeMenu{
    cursor: pointer;
    margin-right: 10px;
    height: 64px;
    width: 50px;
  }
  .closeMenu:hover
  {
    background-color: rgb(242,242,242);
  }
</style>

核心解释

因为点击收起或展开的按钮在 HeaderContent.vue 中，而绑定收起或展开的变量在NarBar.vue中，所以我们需要在父组件中传入一个方法，在子组件触发，并且在  NarBar.vue 中必须将控制展开和收起的变量暴露出去，用vue3中的 defineExpose 方法，在通过 ref 绑定即可控制暴露的变量

tips：父组件为  App.vue

根据 element-plus 官网设计容易遇到的问题

<el-aside class="side"  width="collapse">
</el-aside>

如果上面的代码把 width 属性设置成  “具体尺寸“px，比如 100 px，当 NarBar.vue中绑定展开或收起的变量发生改变时候，右侧的内容不会随着左侧的内容变化而变化，而是会固定在初始位置不动

如何解决？

很简单，不设置成 “具体尺寸“px 这种格式即可

这个问题官网没有具体的解答，但是网上是有相关的处理方式的

代码有问题或有疑问欢迎在评论区讨论

代码007普通

打赏 收藏 海报 链接