目录
1.代码实现
2.测试数据
3.效果图
1.代码实现
<template><div class="app-container"><div class="sidebar-container"><el-container style="height: 100vh;"><el-aside width="200px"><el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect":collapse="isCollapse" router="true"><!--首页菜单--><el-menu-item index="Dashboard"style="background-color:rgb(77, 79, 82) ;color: aliceblue;">首页</el-menu-item><!--一级菜单--><el-sub-menu v-for="item in menuItems" :key="item.id" :index="item.id"><template #title><!-- <i :class="el-icon-menu"></i> --><span>{{ item.functionName }}</span></template><!--二级菜单--><el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.url">{{ subItem.functionName }}</el-menu-item></el-sub-menu></el-menu></el-aside><!--主内容区--><el-main><router-view></router-view></el-main></el-container><div class="collapse-button" @click="toggleCollapse"><i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i></div></div></div>
</template><script>
import { ElContainer, ElAside, ElMenu, ElSubMenu, ElMenuItem, ElMenuItemGroup } from 'element-plus';
import { ref } from 'vue';export default {data() {//取出缓存const data = JSON.parse(localStorage.getItem('userInfo'));//从缓存取出用户信息并返回if (data) {return {userName: data.userInfoData.name,roleNames: data.userInfoData.roleNames.join(","),userLoginName: data.userInfoData.loginName,mail: data.userInfoData.mail,phone: data.userInfoData.phone,activeIndex: 'Dashboard',isCollapse: false,menuItems: data.menuList,}}},components: {ElContainer,ElAside,ElMenu,ElSubMenu,ElMenuItem,ElMenuItemGroup},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},handleSelect(key, keyPath) {this.activeIndex = key;},toggleCollapse() {this.isCollapse = !this.isCollapse;},},//页面加载完成后，跳到仪表盘页mounted() {//指定路由this.$router.push({ path: '/Dashboard' });},// setup() { // const handleOpen = (key, keyPath) => { // console.log('Open', key, keyPath); // }; // const handleClose = (key, keyPath) => { // console.log('Close', key, keyPath); // }; // return { // handleOpen, // handleClose, // }; // } }
</script><style scoped>
.dashboard-container {display: flex;/* 使用flex布局 */justify-content: space-between;/* 子元素之间的间隔 */align-items: flex-start;/* 子元素垂直方向顶部对齐 */padding: 20px;max-width: 1200px;margin: 0 auto;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 8px;background-color: #71e4ae;
}h1 {color: #333;text-align: center;margin-bottom: 20px;
}.info-list {list-style-type: none;/* 移除列表项前的标记 */padding: 0;
}.info-list li {margin-bottom: 10px;font-size: 16px;color: #666;
}.sidebar {width: 200px;/* 侧边栏宽度 */background-color: #f4f4f4;/* 侧边栏背景色 */padding: 20px;border-radius: 8px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}.sidebar ul {list-style-type: none;padding: 0;
}.sidebar li {margin-bottom: 10px;
}.sidebar a {color: #333;text-decoration: none;font-size: 16px;display: block;/* 使链接占据整行 */padding: 8px;border-radius: 4px;transition: background-color 0.3s;/* 平滑过渡效果 */
}.sidebar a:hover {background-color: #c6ec97;/* 鼠标悬停时的背景色 */
}.app-container {display: flex;
}.main-content {flex: 1;/* 剩余空间 */padding: 20px;/* 内容区域的内边距 */
}.sidebar-container {display: flex;flex-direction: column;width: 200px;min-height: 100vh;background-color: #545c64;
}.collapse-button {margin: 10px;align-self: flex-end;background-color: #545c64;color: #fff;border: none;
}.el-menu-vertical-demo {flex: 1;background-color: #4d4f52;
}:deep(.el-menu-vertical-demo .el-menu-item) {color: #fff;background-color: cadetblue;
}:deep(.el-menu-vertical-demo .el-sub-menu__title) {color: #fff;
}:deep(.el-menu-vertical-demo .el-menu-item:hover),
:deep(.el-menu-vertical-demo .el-sub-menu__title:hover) {background-color: #1f2d3d;
}:deep(.el-menu-vertical-demo .el-menu-item.is-active),
:deep(.el-menu-vertical-demo .el-sub-menu__title.is-active) {background-color: #ffd04b;color: #545c64;
}:deep(.el-menu-vertical-demo .el-sub-menu__title) i,
:deep(.el-menu-vertical-demo .el-menu-item) i {margin-right: 10px;
}.router-link-active {color: #ffd04b;
}
</style>2.测试数据
{"code": "0000","data": {"userInfoData": {},"menuList": [{"id": 3,"functionName": "用户相关","permissionName": "admin","url": "user","children": [{"id": 1,"functionName": "用户管理","permissionName": "admin","url": "UserManage","parentId": 3,"children": []}, {"id": 2,"functionName": "角色管理","permissionName": "user","url": "upload","parentId": 3}]}, {"id": 4,"functionName": "系统设置","permissionName": "admin","url": "sys","children": [{"id": 5,"functionName": "菜单管理","permissionName": "admin","url": "MenuManage","parentId": 4}]}]}
}3.效果图
