展开和折叠侧边菜单
最编程
2024-09-30 21:14:33
...
<script setup>
import {ref} from "vue";
// 是否折叠菜单，默认折叠
const isCollapse = ref(true)
// 退出登录
function logout() {
alert('退出')
}
// 个人中心
function profile() {
alert('个人中心')
}
</script>
<template>
<el-container>
<el-aside>
<el-scrollbar>
<el-menu
:collapse="isCollapse"
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
>
<el-sub-menu index="1">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon>
<Menu/>
</el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon>
<document/>
</el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon>
<setting/>
</el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container style="height: 100vh;">
<el-header>
<el-row align="middle" justify="space-between" style="height: 100%">
<el-col :span="1" style="cursor: pointer">
<el-icon v-show="isCollapse" @click="isCollapse=false">
<Expand/>
</el-icon>
<el-icon v-show="!isCollapse" @click="isCollapse=true">
<Fold/>
</el-icon>
</el-col>
<el-col :span="1">
<el-dropdown>
<el-image class="avatar" src="/public/vite.svg"></el-image>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="profile">个人信息</el-dropdown-item>
<el-dropdown-item @click="logout" divided>退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</el-header>
<el-main>
</el-main>
</el-container>
</el-container>
</template>
<style scoped lang="scss">
.el-container {
.el-aside {
height: 100vh;
width: auto;
:deep(.el-scrollbar__view ){
height: 100%;
.el-menu {
height: 100%;
width: 100%;
}
}
}
.el-container {
.el-header {
background-color: #ffffff;
.avatar {
border-radius: 50%;
cursor: pointer;
}
}
.el-main {
background-color: #efefef;
}
}
}
</style>
上一篇： 实时数字人DH_live使用案例
下一篇： 数据结构 - 顺序表、链表