当前位置：首页 > news >正文

侧边菜单的展开和折叠

news 2025/6/28 17:15:43

在这里插入图片描述

环境准备：Vue3+Element-UI Plus

<script setup>
import {ref} from "vue";// 是否折叠菜单，默认折叠
const isCollapse = ref(true)</script><template><el-container><el-aside><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-aside><el-container><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-image class="avatar" src="/public/vite.svg"></el-image></el-col></el-row></el-header><el-main></el-main></el-container></el-container>
</template><style scoped lang="scss">
.el-container {.el-aside {background-color: slategrey;height: 100vh;width: auto;.el-menu {height: 100%;width: 100%;}}.el-container {.el-header {background-color: #ffffff;.avatar {border-radius: 50%;border: 1px solid #00ffff;}}.el-main {background-color: #efefef;}}
}
</style>