devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【VUE项目实战】16、主页Header和左侧菜单栏布局_vue3实现header和侧边菜单栏

作者：Monodyee | 2024-05-06 05:10:46

赞

踩

vue3实现header和侧边菜单栏

接上篇《15、Home页面布局设计及框架搭建》
上一篇我们搭建了Home主页面的整体框架（三大块，左侧菜单栏、右侧主体区域和头部导航栏），半篇我们来编写头部Header和左侧菜单栏的布局样式。

先来回顾一下我们的整体布局：

然后我们要实现的效果图：

一、头部Header布局

可以看到，头部区域左侧是一个Logo和系统的名称，右侧是一个退出按钮。这种左右布局最简单的实现方式就是使用flex布局。左侧包一个大的DIV，放一个图片和一个文本，右侧就放一个退出按钮。

下面我们来编写，我们在Home.vue中找到“el-header”，在里面放置div：

  1. <el-header><!-- 头部区 -->
  2.     <div>
  3.         <img src="../assets/logo2.png" alt="" height="50px"/>
  4.         <span>电商后台管理系统</span>
  5.     </div>
  6.     <el-button type="info" @click="logout">退出</el-button>
  7. </el-header>

图片是我随便又找的一个，然后需要在下面为el-header添加flex布局（同时div和文字的span也需要添加样式）：

  1.  .el-header{
  2.      background-color: #373d41;
  3.      display: flex; //设置显示为flex布局
  4.      justify-content: space-between;//设置为flex左右布局
  5.      padding-left: 0;//左内边距为0（Logo贴左边）
  6.      align-items: center;//元素上下居中（防止右边按钮贴上下边）
  7.      color: #fff;
  8.      font-size: 20px;
  9.      > div {//内嵌的div样式
  10.          display: flex;
  11.          align-items: center;//Logo和文字上下居中
  12.          span {
  13.              margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
  14.          }
  15.      }
  16.  }

完整代码：

  1. <template>
  2.     <el-container class="home-container">
  3.         <el-header><!-- 头部区 -->
  4.             <div>
  5.                 <img src="../assets/logo2.png" alt="" height="50px"/>
  6.                 <span>电商后台管理系统</span>
  7.             </div>
  8.             <el-button type="info" @click="logout">退出</el-button>
  9.         </el-header>
  10.         <!-- 页面主体区域 -->
  11.         <el-container>
  12.             <!-- 侧边栏 -->
  13.             <el-aside width="200px">Aside</el-aside>
  14.             <!-- 右侧内容主体 -->
  15.             <el-main>Main</el-main>
  16.         </el-container>
  17.     </el-container>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22.     methods:{
  23.         logout(){
  24.             window.sessionStorage.clear();
  25.             this.$router.push('/login');
  26.         }
  27.     }
  28. };
  29. </script>
  30.  
  31. <style lang="less" scoped>
  32. .home-container{
  33.     height: 100%;
  34. }
  35.  .el-header{
  36.      background-color: #373d41;
  37.      display: flex; //设置显示为flex布局
  38.      justify-content: space-between;//设置为flex左右布局
  39.      padding-left: 0;//左内边距为0（Logo贴左边）
  40.      align-items: center;//元素上下居中（防止右边按钮贴上下边）
  41.      color: #fff;
  42.      font-size: 20px;
  43.      > div {//内嵌的div样式
  44.          display: flex;
  45.          align-items: center;//Logo和文字上下居中
  46.          span {
  47.              margin-left: 15px;//文字左侧设置间距，防止与Logo紧贴
  48.          }
  49.      }
  50.  }
  51.   .el-aside{
  52.      background-color: #333744;
  53.  }
  54.   .el-main{
  55.      background-color: #eaedf1;
  56.  }
  57. </style>

效果：

二、左侧菜单栏布局

左侧菜单栏布局的实现要点：

实现二级可折叠菜单，需要在el-menu中谁知el-submenu，是一级菜单，然后使用el-menu-item作为嵌套的二级菜单，其中你那个的i标签是菜单的小图标，span是菜单的文字。

我们登录element-ui官网，找到自定义颜色的那个导航菜单样例，复制其代码，准备进行改造：

代码（这里面的el-menu中除了background和text的其他样式全部删除）：

  1. <el-menu
  2.   background-color="#545c64"
  3.   text-color="#fff"
  4.   active-text-color="#ffd04b">
  5.   <el-submenu index="1">
  6.     <template slot="title">
  7.       <i class="el-icon-location"></i>
  8.       <span>导航一</span>
  9.     </template>
  10.     <el-menu-item-group>
  11.       <template slot="title">分组一</template>
  12.       <el-menu-item index="1-1">选项1</el-menu-item>
  13.       <el-menu-item index="1-2">选项2</el-menu-item>
  14.     </el-menu-item-group>
  15.     <el-menu-item-group title="分组2">
  16.       <el-menu-item index="1-3">选项3</el-menu-item>
  17.     </el-menu-item-group>
  18.     <el-submenu index="1-4">
  19.       <template slot="title">选项4</template>
  20.       <el-menu-item index="1-4-1">选项1</el-menu-item>
  21.     </el-submenu>
  22.   </el-submenu>
  23.   <el-menu-item index="2">
  24.     <i class="el-icon-menu"></i>
  25.     <span slot="title">导航二</span>
  26.   </el-menu-item>
  27.   <el-menu-item index="3" disabled>
  28.     <i class="el-icon-document"></i>
  29.     <span slot="title">导航三</span>
  30.   </el-menu-item>
  31.   <el-menu-item index="4">
  32.     <i class="el-icon-setting"></i>
  33.     <span slot="title">导航四</span>
  34.   </el-menu-item>
  35. </el-menu>

打开项目的element.js，首先引用菜单需要的组件“Menu”、“Submenu”、“MenuItemGroup”和“MenuItem”：

  1. import Vue from 'vue'
  2. import { Button, Form, FormItem, Input, Message, Container, 
  3.     Header, Aside, Main, Menu, Submenu, MenuItem, MenuItemGroup } from 'element-ui'
  4.  
  5. Vue.use(Button)
  6. Vue.use(Form)
  7. Vue.use(FormItem)
  8. Vue.use(Input)
  9. Vue.use(Container)
  10. Vue.use(Header)
  11. Vue.use(Aside)
  12. Vue.use(Main)
  13. Vue.use(Menu)
  14. Vue.use(Submenu)
  15. Vue.use(MenuItem)
  16. Vue.use(MenuItemGroup)
  17. Vue.prototype.$message = Message

然后打开Home.vue，将上面的代码粘贴到el-aside中：

  1. <template>
  2.   <el-container class="home-container">
  3.     <el-header><!-- 头部区 -->
  4.       <div>
  5.         <img src="../assets/logo2.png" alt="" height="50px" />
  6.         <span>电商后台管理系统</span>
  7.       </div>
  8.       <el-button type="info" @click="logout">退出</el-button>
  9.     </el-header>
  10.     <!-- 页面主体区域 -->
  11.     <el-container>
  12.       <!-- 侧边栏 -->
  13.       <el-aside width="200px">
  14.         <el-menu
  15.           background-color="#545c64"
  16.           text-color="#fff"
  17.           active-text-color="#ffd04b">
  18.           <el-submenu index="1">
  19.             <template slot="title">
  20.               <i class="el-icon-location"></i>
  21.               <span>导航一</span>
  22.             </template>
  23.             <el-menu-item-group>
  24.               <template slot="title">分组一</template>
  25.               <el-menu-item index="1-1">选项1</el-menu-item>
  26.               <el-menu-item index="1-2">选项2</el-menu-item>
  27.             </el-menu-item-group>
  28.             <el-menu-item-group title="分组2">
  29.               <el-menu-item index="1-3">选项3</el-menu-item>
  30.             </el-menu-item-group>
  31.             <el-submenu index="1-4">
  32.               <template slot="title">选项4</template>
  33.               <el-menu-item index="1-4-1">选项1</el-menu-item>
  34.             </el-submenu>
  35.           </el-submenu>
  36.           <el-menu-item index="2">
  37.             <i class="el-icon-menu"></i>
  38.             <span slot="title">导航二</span>
  39.           </el-menu-item>
  40.           <el-menu-item index="3" disabled>
  41.             <i class="el-icon-document"></i>
  42.             <span slot="title">导航三</span>
  43.           </el-menu-item>
  44.           <el-menu-item index="4">
  45.             <i class="el-icon-setting"></i>
  46.             <span slot="title">导航四</span>
  47.           </el-menu-item>
  48.         </el-menu>
  49.       </el-aside>
  50.       <!-- 右侧内容主体 -->
  51.       <el-main>Main</el-main>
  52.     </el-container>
  53.   </el-container>
  54. </template>
  55.  
  56. <script>
  57. export default {
  58.   methods: {
  59.     logout() {
  60.       window.sessionStorage.clear();
  61.       this.$router.push("/login");
  62.     },
  63.   },
  64. };
  65. </script>
  66.  
  67. <style lang="less" scoped>
  68. .home-container {
  69.   height: 100%;
  70. }
  71. .el-header {
  72.   background-color: #373d41;
  73.   display: flex; //设置显示为flex布局
  74.   justify-content: space-between; //设置为flex左右布局
  75.   padding-left: 0; //左内边距为0（Logo贴左边）
  76.   align-items: center; //元素上下居中（防止右边按钮贴上下边）
  77.   color: #fff;
  78.   font-size: 20px;
  79.   > div {
  80.     //内嵌的div样式
  81.     display: flex;
  82.     align-items: center; //Logo和文字上下居中
  83.     span {
  84.       margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
  85.     }
  86.   }
  87. }
  88. .el-aside {
  89.   background-color: #333744;
  90. }
  91. .el-main {
  92.   background-color: #eaedf1;
  93. }
  94. </style>

效果：

菜单和二级的菜单都显示出来了，但是菜单的背景色和我们的左侧主体颜色不太一样，我们修改一下el-menu的background-color：

background-color="#333744"

效果：

然后官方代码里有分一级和二级菜单，还有禁用的菜单，当前项目只需要二级菜单，所以我们删除所有不需要的菜单样式：

  1. <template>
  2.   <el-container class="home-container">
  3.     <el-header><!-- 头部区 -->
  4.       <div>
  5.         <img src="../assets/logo2.png" alt="" height="50px" />
  6.         <span>电商后台管理系统</span>
  7.       </div>
  8.       <el-button type="info" @click="logout">退出</el-button>
  9.     </el-header>
  10.     <!-- 页面主体区域 -->
  11.     <el-container>
  12.       <!-- 侧边栏 -->
  13.       <el-aside width="200px">
  14.         <el-menu
  15.           background-color="#333744"
  16.           text-color="#fff"
  17.           active-text-color="#ffd04b">
  18.           <!-- 一级菜单 -->
  19.           <el-submenu index="1">
  20.             <!-- 一级菜单的模板区域 -->
  21.             <template slot="title">
  22.               <!-- 图标 -->
  23.               <i class="el-icon-location"></i>
  24.               <!-- 文本 -->
  25.               <span>导航一</span>
  26.             </template>
  27.             <!-- 二级菜单 -->
  28.             <el-menu-item index="1-1">
  29.                 <template slot="title">
  30.                     <i class="el-icon-menu"></i>
  31.                     <span slot="title">导航二</span>
  32.                 </template>
  33.             </el-menu-item>
  34.           </el-submenu>
  35.         </el-menu>
  36.       </el-aside>
  37.       <!-- 右侧内容主体 -->
  38.       <el-main>Main</el-main>
  39.     </el-container>
  40.   </el-container>
  41. </template>
  42.  
  43. <script>
  44. export default {
  45.   methods: {
  46.     logout() {
  47.       window.sessionStorage.clear();
  48.       this.$router.push("/login");
  49.     },
  50.   },
  51. };
  52. </script>
  53.  
  54. <style lang="less" scoped>
  55. .home-container {
  56.   height: 100%;
  57. }
  58. .el-header {
  59.   background-color: #373d41;
  60.   display: flex; //设置显示为flex布局
  61.   justify-content: space-between; //设置为flex左右布局
  62.   padding-left: 0; //左内边距为0（Logo贴左边）
  63.   align-items: center; //元素上下居中（防止右边按钮贴上下边）
  64.   color: #fff;
  65.   font-size: 20px;
  66.   > div {
  67.     //内嵌的div样式
  68.     display: flex;
  69.     align-items: center; //Logo和文字上下居中
  70.     span {
  71.       margin-left: 15px; //文字左侧设置间距，防止与Logo紧贴
  72.     }
  73.   }
  74. }
  75. .el-aside {
  76.   background-color: #333744;
  77. }
  78. .el-main {
  79.   background-color: #eaedf1;
  80. }
  81. </style>

删除完毕后，再看一下样式，

目前菜单栏目就优化为我们需要的样式了。

下一篇我们通过数据接口获取菜单，然后加载到页面上。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/120583935

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/542628
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号