vue3+elementPlus 侧边菜单栏固定logo和头像

最新推荐文章于 2024-07-10 22:09:34 发布

喝可乐的大喵

最新推荐文章于 2024-07-10 22:09:34 发布

阅读量995

点赞数 9

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/phoenixguangyu/article/details/135269084

版权

template:

    <el-container>
      <el-aside width="100px" class="aside">
        <!-- 标志 -->
        <img class="log" src="../../assets/static/xxxx.png" alt="xx" />
        <!-- 侧边栏权限按钮 -->
        <el-scrollbar>
          <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" collapse background-color="#C3292A">
            <el-sub-menu :index="menu.path + ''" v-for="(menu, index) in menuList" :key="index"
              :class="{ isActive: route.path.match(menu.path) }">
              <template #title>
                <el-icon>
                  <component :is="menu.icon"></component>
                </el-icon>
                <div class="menu-name">{{ menu.name }}</div>
              </template>
              <el-menu-item-group v-for="(item2, index) in menu.children" :key="index">
                <el-menu-item :index="item2.path + ''" :router="{ path: item2.path }">{{ item2.name }}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
        <!-- 头像 -->
        <div class="avatar" @click="logout">
          <img class="avatar-log" :src="userAvatar || defaultImage" alt="" />
          <div>{{ userName }}</div>
        </div>
      </el-aside>
      <el-container>

less:

.aside {
  background-color: var(--bg--color);
  text-align: center;

  .log {
    width: 41px;
    height: 41px;
    padding-top: 20px;
    margin-bottom: 20px;
  }

  .el-scrollbar {
    height: calc(100vh - 200px);
  }

  .el-menu {
    border: none;
    border-right-width: 0;
  }

  .el-menu-vertical-demo {
    width: 100%;


    :deep(.el-sub-menu__title) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #ffffff;
      margin: 0;
      padding: 0;
      height: 70px;

      .el-icon {
        margin: 0;

        img {
          width: 17.54px;
          height: 16.75px;
        }
      }

      .menu-name {
        line-height: initial;
        font-size: 12px;
      }
    }
  }
.avatar {
  color: #fff;
  font-size: 12px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px !important;
  }
}