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

菜单展示

引言

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

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

菜单展示

上一节，只是将侧边栏菜单的样式处理完毕。

今天开始填充里面的内容

首先定义路由相关的所有参数

const demo = {
  path: '/',
  name: 'Layout',
  redirect: '/workbench', // 重定向
  component: Layout,
  meta: {
    title: '首页', // 菜单名
    icon: 'icon-banbenqiehuan', // 菜单的icon
    alone: false, // 是否是单页
    hidden: false // 是否隐藏
  },
  children: []
}

之后在 src\layout\aside\index.vue 下进行注册引入内容菜单组件

侧边栏菜单

首先是引入侧边栏组件 asideItem.vue

判断菜单是否是隐藏状态
判断是否是单页

来展示我们的 Icon 以及相关标题。

<template>
  <template v-if="!menuInfo.meta?.hidden">
    <el-sub-menu v-if="!menuInfo.meta?.alone && menuInfo.children?.length" :index="menuInfo.name">
      <template #title>
        <svg-icon :iconName="menuInfo.meta?.icon ?? `icon-banbenqiehuan`" />

        <span>{{ menuInfo.meta.title }}</span>
      </template>

      <MenuTree :menuData="menuInfo.children"></MenuTree>
    </el-sub-menu>
    <el-menu-item v-else :index="menuInfo.name">
      <svg-icon :iconName="menuInfo.meta?.icon ?? `icon-banbenqiehuan`" />
      <span>{{ menuInfo.meta.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import MenuTree from './menuTree.vue'

defineProps({
  menuInfo: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.el-sub-menu__title {
  &:hover {
    color: #ffffff !important;
    // background-color: #375573 !important;
    background-color: #56a9ff !important;
  }
}
.el-menu-item {
  background-color: #020f1d !important;
  border-bottom: 1px solid #020f1d;
  &:hover {
    color: #ffffff !important;
    // background-color: #375573 !important;
    background-color: #56a9ff !important;
  }
}
.el-menu-item.is-active {
  background-color: #56a9ff !important;
}

.svg-icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
}
</style>

由于上一层只是处理父级菜单，接下来处理子菜单。

需要引入循环处理子菜单组件

<template>
  <div>
    <template v-for="child in menuData" :key="child.path">
      <el-sub-menu v-if="child.children?.length" :index="child.path">
        <template #title>
          <span>{{ child.meta.title }}</span>
        </template>

        <MenuTree :menuData="child.children" />
      </el-sub-menu>

      <el-menu-item v-else-if="!child.hidden" :index="child.path">
        <span>{{ child.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script setup lang="ts">
defineProps({
  menuData: {
    type: Array,
    default: () => []
  }
})
</script>
<style lang="scss" scoped>
.el-sub-menu__title {
  &:hover {
    color: #ffffff !important;
    // background-color: #375573 !important;
    background-color: #56a9ff !important;
  }
}

.el-menu-item {
  background-color: #020f1d !important;
  border-bottom: 1px solid #020f1d;
  &:hover {
    color: #ffffff !important;
    // background-color: #375573 !important;
    background-color: #56a9ff !important;
  }
}
.el-menu-item.is-active {
  background-color: #56a9ff !important;
}
</style>