侧边菜单的睁开和折叠

环境预备：Vue3+Element-UI Plus

1. <script setup>
2. import {ref} from "vue";
4. // 是否折叠菜单，默认折叠
5. const isCollapse = ref(true)
7. // 退出登录
8. function logout() {
9.   alert('退出')
10. }
12. // 个人中心
13. function profile() {
14.   alert('个人中心')
15. }
16. </script>
18. <template>
19.   <el-container>
20.     <el-aside>
21.       <el-scrollbar>
22.         <el-menu
23.             :collapse="isCollapse"
24.             active-text-color="#ffd04b"
25.             background-color="#545c64"
26.             class="el-menu-vertical-demo"
27.             default-active="2"
28.             text-color="#fff"
29.         >
30.           <el-sub-menu index="1">
31.             <template #title>
32.               <el-icon>
33.                 <location/>
34.               </el-icon>
35.               <span>Navigator One</span>
36.             </template>
37.             <el-menu-item-group title="Group One">
38.               <el-menu-item index="1-1">item one</el-menu-item>
39.               <el-menu-item index="1-2">item two</el-menu-item>
40.             </el-menu-item-group>
41.             <el-menu-item-group title="Group Two">
42.               <el-menu-item index="1-3">item three</el-menu-item>
43.             </el-menu-item-group>
44.             <el-sub-menu index="1-4">
45.               <template #title>item four</template>
46.               <el-menu-item index="1-4-1">item one</el-menu-item>
47.             </el-sub-menu>
48.           </el-sub-menu>
49.           <el-menu-item index="2">
50.             <el-icon>
51.               <Menu/>
52.             </el-icon>
53.             <span>Navigator Two</span>
54.           </el-menu-item>
55.           <el-menu-item index="3" disabled>
56.             <el-icon>
57.               <document/>
58.             </el-icon>
59.             <span>Navigator Three</span>
60.           </el-menu-item>
61.           <el-menu-item index="4">
62.             <el-icon>
63.               <setting/>
64.             </el-icon>
65.             <span>Navigator Four</span>
66.           </el-menu-item>
67.         </el-menu>
68.       </el-scrollbar>
69.     </el-aside>
70.     <el-container style="height: 100vh;">
71.       <el-header>
72.         <el-row align="middle" justify="space-between" style="height: 100%">
73.           <el-col :span="1" style="cursor: pointer">
74.             <el-icon v-show="isCollapse" @click="isCollapse=false">
75.               <Expand/>
76.             </el-icon>
77.             <el-icon v-show="!isCollapse" @click="isCollapse=true">
78.               <Fold/>
79.             </el-icon>
80.           </el-col>
81.           <el-col :span="1">
82.             <el-dropdown>
83.               <el-image class="avatar" src="/public/vite.svg"></el-image>
84.               <template #dropdown>
85.                 <el-dropdown-menu>
86.                   <el-dropdown-item @click="profile">个人信息</el-dropdown-item>
87.                   <el-dropdown-item @click="logout" divided>退出</el-dropdown-item>
88.                 </el-dropdown-menu>
89.               </template>
90.             </el-dropdown>
91.           </el-col>
92.         </el-row>
93.       </el-header>
94.       <el-main>
95.       </el-main>
96.     </el-container>
97.   </el-container>
98. </template>
100. <style scoped lang="scss">
101. .el-container {
102.   .el-aside {
103.     height: 100vh;
104.     width: auto;
105.     :deep(.el-scrollbar__view ){
106.       height: 100%;
107.       .el-menu {
108.         height: 100%;
109.         width: 100%;
110.       }
111.     }
112.   }
114.   .el-container {
115.     .el-header {
116.       background-color: #ffffff;
118.       .avatar {
119.         border-radius: 50%;
120.         cursor: pointer;
121.       }
122.     }
124.     .el-main {
125.       background-color: #efefef;
126.     }
127.   }
128. }
129. </style>

复制代码