Header Aside Main &l_后台管理系统首页">
devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

后台管理系统——02首页布局_后台管理系统首页

作者：秋刀鱼在做梦 | 2024-07-01 05:31:07

赞

踩

后台管理系统首页

续上01，接下来实现layout.vue的基本布局

layout.vue

  1. <template>
  2.   <div class="home">
  3.     <el-container>
  4.   <el-header>Header</el-header>
  5.   <el-container>
  6.     <el-aside width="200px">Aside</el-aside>
  7.     <el-main>Main</el-main>
  8.   </el-container>
  9. </el-container>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. // @ is an alias to /src
  15. export default {
  16.   name: 'layout',
  17. }
  18. </script>
  19. <style>
  20.   .el-header {
  21.     background-color: #B3C0D1;
  22.     color: #333;
  23.     text-align: center;
  24.     line-height: 60px;
  25.     
  26.   }
  27.   
  28.   .el-aside {
  29.     background-color: #D3DCE6;
  30.     color: #333;
  31.     text-align: center;
  32.     line-height: 200px;
  33.     position: absolute;
  34.     top: 60px;
  35.     bottom: 0;
  36.   }
  37.   
  38.   .el-main {
  39.     background-color: #E9EEF3;
  40.     color: #333;
  41.     text-align: center;
  42.     line-height: 160px;
  43.     position: absolute;
  44.     top: 60px;
  45.     left: 200px;
  46.     right: 0;
  47.     bottom: 0;
  48.   }
  49.   
  50.   body > .el-container {
  51.     margin-bottom: 40px;
  52.   }
  53.   
  54.   .el-container:nth-child(5) .el-aside,
  55.   .el-container:nth-child(6) .el-aside {
  56.     line-height: 260px;
  57.   }
  58.   
  59.   .el-container:nth-child(7) .el-aside {
  60.     line-height: 320px;
  61.   }
  62. </style>

效果：

 测试一下是否可以分开滚动

制作header的导航栏

 这里用到了bootstrap4中的mr-auto

  1. <template>
  2.   <div class="home">
  3.     <el-container>
  4.       <el-header>
  5.         <div class="flex mr-auto ">
  6.           <h2 class="tit">WEB ADMIN</h2>
  7.           <i class="el-icon-s-fold" @click="menucollapse"></i>
  8.         </div>
  9.         <el-menu
  10.           :default-active="activeIndex2"
  11.           class="el-menu-demo"
  12.           mode="horizontal"
  13.           @select="handleSelect"
  14.           background-color="#545c64"
  15.           text-color="#fff"
  16.           active-text-color="#ffd04b"
  17.         >
  18.           <el-menu-item index="1">处理中心</el-menu-item>
  19.           <el-submenu index="2">
  20.             <template slot="title">我的工作台</template>
  21.             <el-menu-item index="2-1">选项1</el-menu-item>
  22.             <el-menu-item index="2-2">选项2</el-menu-item>
  23.             <el-menu-item index="2-3">选项3</el-menu-item>
  24.             <el-submenu index="2-4">
  25.               <template slot="title">选项4</template>
  26.               <el-menu-item index="2-4-1">选项1</el-menu-item>
  27.               <el-menu-item index="2-4-2">选项2</el-menu-item>
  28.               <el-menu-item index="2-4-3">选项3</el-menu-item>
  29.             </el-submenu>
  30.           </el-submenu>
  31.           <el-menu-item index="3" disabled>消息中心</el-menu-item>
  32.           <el-menu-item index="4"
  33.             ><a href="https://www.ele.me" target="_blank"
  34.               >订单管理</a
  35.             ></el-menu-item
  36.           >
  37.         </el-menu>
  38.       </el-header>
  39.   </div>
  40. </template>
  41.  
  42. <script>
  43. export default {
  44.   name: "layout",
  45.   data() {
  46.     return {
  47.       activeIndex: "1",
  48.       activeIndex2: "1",
  49.     };
  50.   },
  51.   methods: {
  52.     handleSelect(key, keyPath) {
  53.       console.log(key, keyPath);
  54.     },
  55.   },
  56. };
  57. </script>
  58. <style>
  59. .el-header {
  60.   background-color: #545c64;
  61.   color: #333;
  62.   text-align: center;
  63.   line-height: 60px;
  64.   display: flex;
  65. }
  66.  
  67. .el-aside {
  68.   background-color: #d3dce6;
  69.   color: #333;
  70.   text-align: center;
  71.   /*     position: absolute;
  72.     top: 60px;
  73.     bottom: 0; */
  74. }
  75.  
  76. .el-main {
  77.   background-color: #e9eef3;
  78.   color: #333;
  79.   /* padding: 0 20px; */
  80.   text-align: center;
  81.   /*     position: absolute;
  82.     top: 60px;
  83.     left: 200px;
  84.     right: 0;
  85.     bottom: 0; */
  86. }
  87. .flex {
  88.   display: flex;
  89.   align-items: center;
  90.   color: #fff;
  91.   cursor: pointer;
  92. }
  93. </style>

添加图片：

  1.           <el-submenu index="2">
  2.             <template slot="title">
  3.               <el-avatar
  4.                 size="small"
  5.                 src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
  6.               ></el-avatar>
  7.               admin
  8.             </template>
  9.             <el-menu-item index="2-1">设置</el-menu-item>
  10.             <el-menu-item index="2-2">退出</el-menu-item>
  11.           </el-submenu>

把数据结构中的数据放入对应的位置上

数据结构：

  1.  navBar: {
  2.         active: "0",
  3.         list: [
  4.           {
  5.             name: "首页",
  6.             subActive: "0",
  7.             submenu: [
  8.               {
  9.                 icon: "el-icon-s-home",
  10.                 name: "后台首页",
  11.                 pathname: "index",
  12.               },
  13.               {
  14.                 icon: "el-icon-s-claim",
  15.                 name: "商品列表",
  16.                 pathname: "shop_goods_list",
  17.               },
  18.             ],
  19.           },
  20.           {
  21.             name: "商品",
  22.             subActive: "0",
  23.             submenu: [
  24.               {
  25.                 icon: "el-icon-s-claim",
  26.                 name: "商品列表",
  27.                 pathname: "shop_goods_list",
  28.               },
  29.             ],
  30.           },
  31.           {
  32.             name: "订单",
  33.           },
  34.           {
  35.             name: "会员",
  36.           },
  37.           {
  38.             name: "设置",
  39.           },
  40.         ],
  41.       },

 遍历数据结构，取出中间的name

<el-menu-item index="1" v-for="(item, index) in navBar.list" :key="index">{{item.name}}</el-menu-item>
  1.  <el-menu
  2.           :default-active="navBar.active"
  3.           class="el-menu-demo"
  4.           mode="horizontal"
  5.           @select="handleSelect"
  6.           background-color="#545c64"
  7.           text-color="#fff"
  8.           active-text-color="#ffd04b"
  9.         >

完整布局代码： 

  1. <template>
  2.   <div class="home">
  3.     <el-container>
  4.       <el-header>
  5.         <div class="flex mr-auto">
  6.           <h2 class="tit">WEB ADMIN</h2>
  7.           <!-- 这里设置一个点击事件用来切换侧边栏的效果 -->
  8.           <i class="el-icon-s-operation" @click="menucollapse"></i>
  9.         </div>
  10.         <el-menu
  11.           :default-active="navBar.active"
  12.           class="el-menu-demo"
  13.           mode="horizontal"
  14.           @select="handleSelect"
  15.           background-color="#545c64"
  16.           text-color="#fff"
  17.           active-text-color="#ffd04b"
  18.         >
  19.           <el-menu-item
  20.             :index="index | numToString"
  21.             v-for="(item, index) in navBar.list"
  22.             :key="index"
  23.             >{{ item.name }}</el-menu-item
  24.           >
  25.           <el-submenu index="100">
  26.             <template slot="title">
  27.               <el-avatar
  28.                 size="small"
  29.                 src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
  30.               ></el-avatar>
  31.               admin
  32.             </template>
  33.             <el-menu-item index="2-1">设置</el-menu-item>
  34.             <el-menu-item index="2-2">退出</el-menu-item>
  35.           </el-submenu>
  36.         </el-menu>
  37.       </el-header>
  38.       <el-container style="height: 100%">
  39.         <!-- 获取他的动态高度，如果开启了collapse收起，那么就缩小成64px，展开就放大200px -->
  40.         <!-- :width="collapse ? '64px' : '200px'" style="height: 100%" -->
  41.         <el-aside width="auto">
  42.           <!-- default-active:gg当前激活菜单的 index -->
  43.           <el-menu
  44.             :default-active="slideMenuActive"
  45.             :collapse="collapse"
  46.             class="el-menu-vertical-demo"
  47.             active-text-color="#008080"
  48.             @select="submenuSelect"
  49.           >
  50.             <el-menu-item
  51.               :index="i | numToString"
  52.               v-for="(item2, i) in submenus"
  53.               :key="i"
  54.             >
  55.               <i :class="item2.icon"></i>
  56.               <span slot="title">{{ item2.name }}</span>
  57.             </el-menu-item>
  58.           </el-menu>
  59.         </el-aside>
  60.         <el-main>
  61.           <p v-for="j in 100" :key="j">{{ j }}</p>
  62.         </el-main>
  63.       </el-container>
  64.     </el-container>
  65.   </div>
  66. </template>
  67.  
  68. <script>
  69. // 混入
  70. import common from "@/common/mixins/common.js";
  71. export default {
  72.   name: "layout",
  73.   mixins: [common],
  74.   data() {
  75.     return {
  76.       collapse: false,
  77.       navBar: {
  78.         active: "0",
  79.         list: [
  80.           {
  81.             name: "首页",
  82.             subActive: "0",
  83.             submenu: [
  84.               {
  85.                 icon: "el-icon-s-home",
  86.                 name: "后台首页",
  87.                 pathname: "index",
  88.               },
  89.               {
  90.                 icon: "el-icon-s-claim",
  91.                 name: "商品列表",
  92.                 pathname: "shop_goods_list",
  93.               },
  94.             ],
  95.           },
  96.           {
  97.             name: "商品",
  98.             subActive: "0",
  99.             submenu: [
  100.               {
  101.                 icon: "el-icon-s-claim",
  102.                 name: "商品列表",
  103.                 pathname: "shop_goods_list",
  104.               },
  105.             ],
  106.           },
  107.           {
  108.             name: "订单",
  109.           },
  110.           {
  111.             name: "会员",
  112.           },
  113.           {
  114.             name: "设置",
  115.           },
  116.         ],
  117.       },
  118.     };
  119.   },
  120.   methods: {
  121.     // 点击图标进行切换
  122.     menucollapse() {
  123.       this.collapse = !this.collapse;
  124.     },
  125.     // 头部索引切换
  126.     handleSelect(key, keyPath) {
  127.       // 把获取到的索引给到active进行绑定
  128.       this.navBar.active = key;
  129.       console.log(this.navBar.active);
  130.       this.slideMenuActive = "0";
  131.       console.log(this.slideMenuActive);
  132.     },
  133.     // 侧边栏导航切换
  134.     submenuSelect(key, keyPath) {
  135.       console.log(key, keyPath);
  136.       this.slideMenuActive = key;
  137.     },
  138.   },
  139.   computed: {
  140.     submenus() {
  141.       // 每次点击的list列表项 例如点击首页：
  142.       // [ { "icon": "el-icon-s-claim", "name": "商品列表", "pathname": "shop_goods_list" } ]
  143.       return this.navBar.list[this.navBar.active].submenu || [];
  144.     },
  145.     slideMenuActive: {
  146.       get() {
  147.         return this.navBar.list[this.navBar.active].subActive || "0";
  148.       },
  149.       set(val) {
  150.         this.navBar.list[this.navBar.active].subActive = val;
  151.       },
  152.     },
  153.   },
  154. };
  155. </script>
  156. <style>
  157. .home{
  158.   height: 100%;
  159. }
  160. .el-container{
  161.   height: 100%;
  162.   overflow: hidden;
  163. }
  164.   .el-menu-vertical-demo:not(.el-menu--collapse) {
  165.     width: 200px;
  166.     min-height: 400px;
  167.   }
  168. .el-header {
  169.   background-color: #545c64;
  170.   color: #333;
  171.   text-align: center;
  172.   line-height: 60px;
  173.   display: flex;
  174. }
  175.  
  176. .el-aside {
  177.   background-color: #d3dce6;
  178.   color: #333;
  179.   text-align: center;
  180.  
  181.   /*   position: absolute;
  182.   top: 60px;
  183.   bottom: 0; */
  184. }
  185.  
  186. .el-main {
  187.   background-color: #e9eef3;
  188.   color: #333;
  189.   padding: 0 20px;
  190.   text-align: center;
  191.   /*   position: absolute;
  192.   top: 60px;
  193.   left: 200px;
  194.   right: 0;
  195.   bottom: 0; */
  196. }
  197. .flex {
  198.   display: flex;
  199.   align-items: center;
  200.   color: #fff;
  201.   cursor: pointer;
  202. }
  203. .tit {
  204.   font-size: 24px;
  205.   line-height: 60px;
  206.   margin-right: 40px;
  207. }
  208. .el-menu{
  209.   height: 100%;
  210. }
  211. </style>

效果：

 注意事项：

参数说明类型可选值默认值
collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—false
事件名称说明回调参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path

 |  在vue里是一个管道符号，前面为你要过滤的值，后面是过滤器，所谓过滤就是你筛选后的值

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

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