vue3 学习笔记17 -- 基于el-menu封装菜单

vue3 学习笔记17 – 基于el-menu封装菜单

前提条件：组件创建完成

配置路由

// src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
export const Layout = () => import('@/layout/index.vue')
// 静态路由
export const routes: RouteRecordRaw[] = [{path: '/login',component: () => import('@/views/login/index.vue'),hidden: true},{path: '/401',component: () => import('@/views/error-page/401.vue'),hidden: true},{path: '/404',component: () => import('@/views/error-page/404.vue'),hidden: true},{path: '/',component: Layout,redirect: '/home',children: [{path: 'home',component: () => import('@/views/home/index.vue'),name: 'Home',meta: { title: '首页', icon: 'home' }}]},{path: '/permission',component: Layout,meta: {title: '权限管理',icon: 'permission'},children: [{path: 'user',component: () => import('@/views/permission/user/index.vue'),name: 'User',meta: { title: '用户管理'}},{path: 'role',component: () => import('@/views/permission/role/index.vue'),name: 'Role',meta: { title: '角色管理' }}]}
]
const router = createRouter({history: createWebHashHistory(),routes: routes as RouteRecordRaw[],scrollBehavior: () => ({ left: 0, top: 0 })
})
/*** 重置路由*/
export function resetRouter() {router.replace({ path: '/login' })
}export default router

封装el-menu

• 目录结构
  

• sidebar/index.vue

<script lang="ts" setup>
// sidebarItem 项组件
import SideBarItem from './sidebarItem.vue'
import { useRouter } from 'vue-router'
import { usePermissionStoreHook } from '@/stores/permission'
import { toRaw } from 'vue'
// 拿到路由列表，过滤我们不想要的
const router = useRouter()
const permissionStore = usePermissionStoreHook()
const routerList = toRaw(permissionStore.permission.routes)
console.log(routerList, '获取到的路由list')
const defaultOpenList = []
const activeMenu = ref()
function handleSelect(index, indexPath) {console.log(index, indexPath)
}
watch(() => router.currentRoute.value.path,(toPath) => {activeMenu.value = toPath//要执行的方法console.log(toPath)},{ immediate: true, deep: true }
)
</script>
<template><div class="sidebar"><!-- 导航菜单 --><el-menuref="elMenu":default-active="activeMenu"@select="handleSelect":default-openeds="defaultOpenList"router><!-- 引入子组件 --><SideBarItem :routerList="routerList" /></el-menu></div>
</template>
<style lang="scss" scoped>
.sidebar {height: 100%;padding-top: 30px;:deep(.el-menu) {width: 100%;height: 100%;overflow-y: auto;background: transparent;border: none;.el-menu-item {font-size: 16px;height: 25px;padding: 0 30px;margin-bottom: 40px;background: transparent;display: flex;align-items: center;outline: none;box-sizing: border-box;&:last-child {margin-bottom: 0;}img {width: 24px;height: 24px;margin-right: 10px;}span {color: var(--vt-main-color);}&.is-active {position: relative;span {color: var(--vt-main-color);font-weight: 600;font-family: 'PingFangSC-Semibold';}&::after {content: '';position: absolute;width: 4px;height: 30px;background: #2b5ae8;left: 0;top: 0;bottom: 0;margin: auto;z-index: 999;}}}.el-sub-menu {font-size: 14px;margin-bottom: 40px;.el-menu-item {min-width: 179px;padding: 0 64px !important;outline: none;overflow: hidden;font-size: 14px;margin-bottom: 20px;&:last-child {margin-bottom: 0;}&:first-child {margin-top: 20px;}span {color: #797979;}&.is-active {span {font-family: 'PingFangSC-Semibold';font-weight: 600;color: var(--vt-main-color);}}}&.is-opened {.el-submenu__title {> span {color: var(--vt-main-color);}}&.is-active {.el-submenu__title {font-weight: 600;}}}.el-sub-menu__title {font-size: 16px;height: 25px;display: flex;align-items: center;padding: 0 30px !important;background: transparent;img {width: 24px;height: 24px;margin-right: 10px;}&:hover {background: transparent;}+ .el-menu {.el-submenu__title {background: transparent;padding: 0 64px !important;}.el-submenu {.el-menu {.el-menu-item {padding: 0 100px !important;&.is-active {padding: 0 100px !important;}}}}}// span {//   position: relative;//   &::after {//     content: '';//     @include imageURL('closeMenu.png');//     width: vw(5 * 2);//     height: vw(5 * 2);//     position: absolute;//     right: vw(-15 * 2);//     top: 0;//     bottom: 0;//     margin: auto;//   }// }}.el-sub-menu__icon-arrow {display: none;}&.is-opened {> .el-sub-menu__title {&:hover {background: transparent;}}.el-menu-item {padding: 0 64px !important;&.is-active {padding-left: 64px !important;font-weight: 600;color: var(--vt-main-color);}}}.el-submenu {margin-bottom: 20px;&:first-child {margin-top: 20px;}}}}
}
</style>

• sidebar/siderbarItem.vue

<script lang="ts" setup>
defineProps({routerList: {type: Array,default: () => {return []}}
})
const getImageUrl = (iconName) => {return new URL(`../../../assets/menu/${iconName}.png`, import.meta.url).href
}
</script>
<template><template v-for="menu in routerList"><el-sub-menu:key="menu.url":index="menu.url"v-if="menu.children && menu.children.length > 0 && !menu.hidden"><template #title><img :src="getImageUrl(menu.meta.icon)" alt="" /><span class="menu-title">{{ menu.meta.title }}</span></template><sidebarItem :router-list="menu.children"></sidebarItem></el-sub-menu><el-menu-item :key="menu.meta.url + 'u'" :index="menu.meta.url" v-else-if="!menu.hidden"><img :src="getImageUrl(menu.meta.icon)" alt="" v-if="menu.meta.icon" /><span class="menu-title">{{ menu.meta.title }}</span></el-menu-item></template>
</template>

• layout/index.vue – 引入菜单

<template><div class="page-box"><div class="page-left"><div class="logo-box"><img src="@/assets/menu/logo-word.png" alt="" /></div><sidebar class="side-menu"></sidebar></div><div class="page-right"><div class="header-box"><div class="title">让电看得见摸得着.</div></div><Layout></Layout></div></div>
</template>
<script setup lang="ts">
import Layout from './layout.vue'
import sidebar from './components/sidebar/index.vue'
</script>
<style lang="scss" scoped>
.page-box {width: 100%;height: 100%;display: flex;overflow: hidden;position: relative;background: #f0f0f0;.page-left {width: 258px;position: fixed;left: 6px;top: 0;bottom: 0;margin: auto;display: flex;flex-direction: column;background: #f0f0f0;.logo-box {height: 73px;display: flex;align-items: center;padding-left: 34px;width: 100%;img {width: 73px;height: 30px;}}.side-menu {width: 100%;flex: 1;background: url('@/assets/menu/bg.png') no-repeat;background-size: 100% 100%;overflow: hidden;transition: width 0.28s;margin-bottom: 60px;box-sizing: content-box;}}.page-right {flex: 1;height: 100%;transition: margin-left 0.28s;margin-left: 264px;display: flex;flex-direction: column;.header-box {position: fixed;width: 87.0625%;//210-230left: 260px;top: 0;padding: 0 50px;display: flex;align-items: center;height: 73px;justify-content: space-between;box-sizing: border-box;z-index: 9;}}
}
</style>

• layout/lauout.vue

<template><div id="app-main"><router-view v-slot="{ Component, route }"><transition name="router-fade" mode="out-in"><div key="route.fullPath"><component :is="Component" /></div></transition></router-view></div>
</template>
<script setup lang="ts"></script>
<style lang="scss">
#app-main {flex: 1;height: 100%;padding-top: 73px;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding-left: 40px;
}
</style>

• 运行项目查看页面