@/Layout/Sidebar/index.vue

<script setup lang="ts">
import Sidebar from './Sidebar.vue' // 在下面的代碼里
import { useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user.ts' // state中存放菜單數(shù)據(jù)
import useLayoutSetting from '@/store/modules/setting.ts' // state存放多頁(yè)面公用大的數(shù)據(jù)（fold： 側(cè)邊菜單欄是否折疊）
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文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-829839.html

<script setup lang="ts">
defineProps(['menu'])
</script>
<script lang="ts">
export default {
  name: 'MenuItem',
}
</script>
<template>
  <!-- 沒(méi)有子路由 -->
  <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>
  <!-- 有子路由但只有一個(gè) --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>
  <!-- 有子路由但只有一個(gè) --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>
  <!-- 有子路由且大于一個(gè) -->
  <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>

到了這里，關(guān)于vue3學(xué)習(xí)——封裝菜單欄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！