本节目标

image.png

点击收起
image.png

1-1创建Sidebar组件

src/layout/components/Sidebar/index.vue
image.png

将layout/index.vue中导入组件
image.png

  1. <template>
  2.   <div class="app-wrapper">
  3.     <div class="sidebar-container">
  4.       <Sidebar />
  5.     </div>
  6.     <div class="main-container">
  7.       <div class="header">
  8.         <div class="navbar">navbar</div>
  9.         <div class="tags-view">tagsview</div>
  10.       </div>
  11.       <div class="app-main">
  12.         <h2>app main</h2>
  13.         <router-view></router-view>
  14.       </div>
  15.     </div>
  16.   </div>
  17. </template>
  19. <script>
  20. import Sidebar from './components/Sidebar'
  22. export default {
  23.   components: {
  24.     Sidebar
  25.   }
  26. }
  27. </script>
  29. <style lang="scss" scoped>
  30.   .app-wrapper {
  31.     display: flex;
  32.     width: 100%;
  33.     height: 100%;
  34.     .main-container {
  35.       flex: 1;
  36.       display: flex;
  37.       flex-direction: column;
  38.       .header {
  39.         background: cyan;
  40.         .navbar {
  41.           height: 50px;
  42.           background: #1890ff;
  43.         }
  44.         .tags-view {
  45.           height: 34px;
  46.           background: #12efff;
  47.         }
  48.       }
  49.       .app-main {
  50.         /* 50= navbar  50  如果有tagsview + 34  */
  51.         min-height: calc(100vh - 84px);
  52.         background: red;
  53.       }
  54.     }
  55.   }
  56. </style>

1.element.ts导入所需菜单组件

这里主要会用到 el-menu el-menu-item element组件 大家别忘了导入
image.png

2.sidebar中菜单组件属性配置

src/layout/components/Sidebar/index.vue

  1. <template>
  2.   <div>
  3.     <!-- 测试展开收起 -->
  4.     <h8 @click="isCollapse=!isCollapse">展收测试</h8>
  6.     <el-menu
  7.       class="sidebar-container-menu"
  8.       mode="vertical"
  9.       :default-active="activeMenu"
  10.       :background-color="scssVariables.menuBg"
  11.       :text-color="scssVariables.menuText"
  12.       :active-text-color="scssVariables.menuActiveText"
  13.       :collapse="isCollapse"
  14.       :collapse-transition="true"
  15.     >
  16.       <sidebar-item />
  17.     </el-menu>
  18.   </div>
  19. </template>
  21. <script lang="ts">
  22. import { defineComponent, computed, ref } from 'vue'
  23. import { useRoute } from 'vue-router'
  24. // 导入scss变量在组件中使用 
  25. import variables from '@/styles/variables.scss'
  26. // el-menu-item封装  
  27. import SidebarItem from './SidebarItem.vue'
  29. export default defineComponent({
  30.   name: 'Sidebar',
  31.   components: {
  32.     SidebarItem
  33.   },
  34.   setup() {
  35.     const route = useRoute()
  36.     // 根据路由路径 对应 当前激活的菜单 页面刷新后 激活当前路由匹配的菜单
  37.     const activeMenu = computed(() => {
  38.       const { path } = route
  39.       return path
  40.     })
  41.     // scss变量
  42.     const scssVariables = computed(() => variables)
  43.     // 菜单展开收起状态 后面会放store里
  44.     const isCollapse = ref(true)
  46.     return {
  47.       // ...toRefs(variables), // 不有toRefs原因 缺点variables里面变量属性来源不明确
  48.       scssVariables,
  49.       isCollapse,
  50.       activeMenu
  51.     }
  52.   }
  53. })
  54. </script>

3. 封装SidebarItem组件

src/layout/components/Sidebar/SidebarItem.vue
目前里面只有一个菜单项 大家可以测下菜单展开收起

  1. <template>
  2.   <div class="sidebar-item-container">
  3.     <el-menu-item index="1">
  4.       <svg-icon class="menu-icon" icon-class="lock"></svg-icon>
  5.       <template #title>
  6.         <span>Dashoard</span>
  7.       </template>
  8.     </el-menu-item>
  9.   </div>
  10. </template>
  12. <script lang="ts">
  13. import { defineComponent } from 'vue'
  15. export default defineComponent({
  16.   name: 'SidebarItem'
  17. })
  18. </script>
  20. <style lang="scss">
  21. .sidebar-item-container {
  22.   .menu-icon {
  23.     margin-right: 16px;
  24.     margin-left: 5px;
  25.     vertical-align: middle;
  26.   }
  27. }
  28. </style>

4. sidebar 全局css样式改动

image.png

  1. #app {
  2.   .sidebar-container {
  3.     width: $sideBarWidth !important;
  4.     height: 100%;
  5.     background-color: pink;
  6.     background-color: $menuBg;
  8.     // menu未收起时样式
  9.     &-menu:not(.el-menu--collapse) {
  10.       width: $sideBarWidth;
  11.     }
  12.     .el-menu {
  13.       border: none;
  14.     }
  15.   }
  16. }

5.简单创建几个路由页

内容很简单
image.png
image.png

6.路由注册下

路由一级都是layout组件

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Layout from '@/layout/index.vue'
  4. // 看作是异步获取路由
  5. export const asyncRoutes: Array<RouteRecordRaw> = [
  6.   {
  7.     path: '/documentation',
  8.     component: Layout, // 布局组件作为一级路由
  9.     redirect: '/documentation/index',
  10.     children: [
  11.       {
  12.         path: 'index',
  13.         name: 'Documentation',
  14.         component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
  15.         meta: {
  16.           title: 'Documentation',
  17.           icon: 'documentation'
  18.         }
  19.       }
  20.     ]
  21.   },
  22.   {
  23.     path: '/guide',
  24.     component: Layout,
  25.     redirect: '/guide/index',
  26.     children: [
  27.       {
  28.         path: 'index',
  29.         name: 'Guide',
  30.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  31.         meta: {
  32.           title: 'Guide',
  33.           icon: 'guide'
  34.         }
  35.       }
  36.     ]
  37.   },
  38.   {
  39.     path: '/system',
  40.     component: Layout,
  41.     redirect: '/system/user',
  42.     meta: {
  43.       title: 'System',
  44.       icon: 'lock'
  45.     },
  46.     children: [
  47.       {
  48.         path: 'menu',
  49.         component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  50.         meta: {
  51.           title: 'Menu Management',
  52.           icon: 'list'
  53.         }
  54.       },
  55.       {
  56.         path: 'role',
  57.         component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  58.         meta: {
  59.           title: 'Role Management',
  60.           icon: 'list'
  61.         }
  62.       },
  63.       {
  64.         path: 'user',
  65.         component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  66.         meta: {
  67.           title: 'User Management',
  68.           icon: 'list'
  69.         }
  70.       }
  71.     ]
  72.   }
  73. ]
  75. export const constantRoutes: Array<RouteRecordRaw> = [
  76.   {
  77.     path: '/',
  78.     component: Layout,
  79.     redirect: '/dashboard',
  80.     children: [
  81.       {
  82.         path: 'dashboard',
  83.         name: 'Dashboard',
  84.         component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
  85.         meta: {
  86.           title: 'Dashboard'
  87.         }
  88.       }
  89.     ]
  90.   }
  91. ]
  93. export const routes = [
  94.   ...constantRoutes, // 解构语法可能报波浪线tslib版本升级 没懂 暂时先不管
  95.   ...asyncRoutes
  96. ]
  98. const router = createRouter({
  99.   history: createWebHashHistory(),
  100.   routes
  101. })
  103. export default router

本节源码参考

https://gitee.com/brolly/vue3-element-admin/commit/7411683e2923767adb62b051b0f9a6d12cc907e5