vue3学习——封装菜单栏

@/Layout/Sidebar/index.vue

javascript 复制代码
<script setup lang="ts">
import Sidebar from './Sidebar.vue' // 在下面的代码里
import { useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user.ts' // state中存放菜单数据
import useLayoutSetting from '@/store/modules/setting.ts' // state存放多页面公用大的数据(fold: 侧边菜单栏是否折叠)
const settingLayout = useLayoutSetting()
const userStore = useUserStore()
const route = useRoute()
</script>

<template>
  <div class="sidebar_container">
    <el-scrollbar>
      <el-menu
        router
        unique-opened
        :default-active="route.path"
        :collapse="settingLayout.fold"
        active-text-color="#fff"
        background-color="#001529"
        class="el-menu-vertical-demo"
        text-color="#959ea7"
      >
        <Sidebar
          v-for="(item, i) in userStore.menuList"
          :key="i"
          :menu="item"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.sidebar_container {
  transition: all 0.5s;
  .el-scrollbar {
    height: calc(100vh - 60px);
    overflow-y: auto;
    .el-menu {
      border-right: none;
    }
  }
}
.fold {
  width: $sidebar-min-width;
}
</style>

@/Layout/Sidebar/Sidebar.vue

javascript 复制代码
<script setup lang="ts">
defineProps(['menu'])
</script>
<script lang="ts">
export default {
  name: 'MenuItem',
}
</script>
<template>
  <!-- 没有子路由 -->
  <el-menu-item :index="menu.path" v-if="!menu.children && !menu.meta.hidden">
    <el-icon v-if="menu.meta">
      <component :is="menu.meta.icon"></component>
    </el-icon>
    <template #title>
      <span>{{ menu.meta.title }}</span>
    </template>
  </el-menu-item>
  <!-- 有子路由但只有一个 --home -->
  <el-menu-item
    :index="menu.children[0].path"
    v-if="
      menu.children &&
      menu.children.length === 1 &&
      menu.path === '/' &&
      !menu.meta.hidden
    "
  >
    <el-icon>
      <component :is="menu.children[0].meta.icon"></component>
    </el-icon>
    <template #title>
      <span>{{ menu.children[0].meta.title }}</span>
    </template>
  </el-menu-item>
  <!-- 有子路由但只有一个 --not home -->
  <el-sub-menu
    :index="menu.path"
    v-if="
      menu.children &&
      menu.children.length === 1 &&
      menu.path !== '/' &&
      !menu.meta.hidden
    "
  >
    <el-icon v-if="menu.meta">
      <component :is="menu.meta.icon"></component>
    </el-icon>
    <template #title>
      <span>{{ menu.meta.title }}</span>
    </template>
    <el-menu-item :index="menu.children[0].path">
      <template #title>
        <el-icon v-if="menu.children[0].meta">
          <component :is="menu.children[0].meta.icon"></component>
        </el-icon>
        <span>{{ menu.children[0].meta.title }}</span>
      </template>
    </el-menu-item>
  </el-sub-menu>
  <!-- 有子路由且大于一个 -->
  <el-sub-menu
    :index="menu.path"
    v-if="menu.children && menu.children.length > 1 && !menu.meta.hidden"
  >
    <template #title>
      <el-icon>
        <component :is="menu.meta.icon"></component>
      </el-icon>
      <span>{{ menu.meta.title }}</span>
    </template>
    <MenuItem v-for="(item, i) in menu.children" :key="i" :menu="item" />
  </el-sub-menu>
</template>

<style lang="scss" scoped></style>
相关推荐
iFulling11 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋11 小时前
AI算法之图像识别与分类
人工智能·学习·算法
xiaoli232712 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号12 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ13 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
stm 学习ing13 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学13 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长14 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理
Littlewith15 小时前
Node.js:创建第一个应用
服务器·开发语言·后端·学习·node.js
ROOKIE Shawn15 小时前
mysql学习笔记
笔记·学习