携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

页面布局-侧边栏菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

页面布局-侧边栏菜单

侧边栏菜单，是我们后台项目必不可少的。

这里主要是通过 ElementPlus 中的三个重要的标签

el-menu、el-sub-menu、el-menu-item

以及配合路由 route 和 router 来进行控制跳转。

今天讲解 el-menu 以及通过 Pinia 来控制菜单的一个伸缩

el-menu

目录结构如下：

// layout/aside/index.vue

<template>
  <div>
    <el-aside id="asideNav">
      <div class="logo-name">
        <span v-if="logoShow">wzms</span>
        <span v-else>旺仔米苏</span>
      </div>

      <div class="elmenu">
        <el-menu
          class="el-menu-vertical"
          :default-active="route.path"
          background-color="#03152A"
          text-color="rgba(255,255,255,.7)"
          active-text-color="#ffffff"
          @select="selectmenu"
          :router="true"
          :collapse="isCollapse"
          :collapse-transition="true"
          :uniquerouter="uniquerouter"
        >
        </el-menu>
      </div>
     
    </el-aside>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useLayoutStore } from '@/store'
import { useRoute, useRouter } from 'vue-router'

const layoutStore = useLayoutStore()
const { logoShow, isCollapse, uniquerouter } = storeToRefs(layoutStore)

const router = useRouter()
const route = useRoute()

const selectmenu = (key) => {
  console.log(key, 'key')
}
</script>

<style lang="scss" scoped>
#asideNav {
  width: auto !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .logo-name {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    background-color: #03152a !important;
    color: #5e6d82;
    z-index: 999;
    font-weight: 300;
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .elmenu {
    height: 100%;
    background-color: #03152a;

    overflow-y: scroll;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      border-right: none;
    }
  }
}
</style>