vue3 侧边栏实现

目录

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.效果图