侧边菜单的展开和折叠

环境准备：Vue3+Element-UI Plus
html 复制代码
<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>