递归竖栏菜单简单思路

自己的项目要写一个竖栏菜单，所以记录一下思路吧，先粗糙的实现一把，有机会再把细节修饰一下

功能上就是无论这个菜单有多少层级，都能显示出来，另外，需要带图标，基于element-plus写成，当这个菜单栏点开的时候最好整个页面的高度不要有变化，最后整成了个小草稿

MyMenu.vue
<template>
    <!-- 自己写的竖栏菜单组件 -->
    <!-- <el-menu style="height: 100%;width:100%"> -->
    <el-scrollbar max-height=100%>
        <el-menu style="width: 100%;border: 0;" unique-opened :default-active="props.defaultIndex" active-text-color="#ffd04b"
            background-color="#545c64" text-color="#fff">
            <MenuTree :menu-data="props.data"></MenuTree>
        </el-menu>
    </el-scrollbar>
</template>
<script lang="ts" setup>
import MenuTree from "./MenuTree.vue"
const props=defineProps<{data:Array<any>,defaultIndex:string}>()
</script>

里面有个递归组件

MenuTree.vue
<template>
    <!-- 递归组件 -->
    <!-- 为了创建无限菜单而使用 -->
    <template v-for="value in props.menuData">
        <!-- 没有children就是一个单标签 -->
    <el-menu-item v-if="!value.children" :index="value.index">
        <template v-if="value.icon">
            <component :is="value.icon" style="width: 1rem;"></component>
        </template>
    {{ value.title }}
    </el-menu-item>
    <!-- 多标签的情况 -->
    <el-sub-menu v-else :index="value.index">
        <template #title>
            <template v-if="value.icon">
            <component :is="value.icon" style="width: 1rem;"></component>
        </template> 
            <span>{{ value.title }}</span></template>
        <MenuTree :menuData="value.children"></MenuTree>
    </el-sub-menu>

    </template>
</template>
<script setup lang="ts">
import MenuTree from "../Page1/MenuTree.vue"
const props=defineProps<{menuData:Array<any>}>()
</script>

最后写个参数挂载一下，我这边用的icon是element-plus组件自带的

<template>
    <el-container style="height: 100vh;">
        <el-header style="padding: 0;height: 5rem;">
            <div style="height: 100%;background-color:pink">
                <span>welcome to page1</span><br />
                <span>该页面用来写一个竖版menu</span>
            </div>
        </el-header>
        <el-container style="height: calc(100vh - 5rem);">
            <el-aside width="15%" style="background-color:lightblue;">
                <MyMenu :data="menuData" :default-index="defaultIndex"/>
            </el-aside>
            <el-main style="background-color:rgb(246, 199, 11);">
                <component :is="iconStr" style="width: 1rem;"></component>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import {ref} from "vue"
import { Search,Select,Close,User } from '@element-plus/icons-vue';
import MyMenu from './MyMenu.vue';
let menuData = [
    {
        title: "睡觉",
        index: "0",
        icon: Select
    },
    {
        title: "游戏",
        index: "1",
        icon: Search,
        children: [
            {
                title: "上古卷轴",
                index: "1-1",
                children: [
                    {
                        title: "上古卷轴匕首雨",
                        index: "1-1-1",
                    },
                    {
                        title: "上古卷轴天际",
                        index: "1-1-2",
                        icon: Select
                    }
                ]
            },
            {
                title: "辐射",
                index: "1-2",
                children: [
                    {
                        title: "龙万德",
                        index: "1-2-1"
                    },
                    {
                        title: "辐射新维加斯",
                        index: "1-2-2"
                    }
                ]
            }
        ]
    },
    {
        title: "美食",
        index: "2",
        icon: Close,
        children: [
            {
                title: "淮扬菜",
                index: "2-1",
                children: [
                    {
                        title: "红烧狮子头",
                        index: "2-1-1"
                    },
                    {
                        title: "猪头肉",
                        index: "2-1-2"
                    },
                ]
            },
            {
                title: "川菜",
                index: "2-2",
                children: [
                    {
                        title: "四川泡菜",
                        index: "2-2-1"
                    },
                    {
                        title: "水煮鱼",
                        index: "2-2-2"
                    },
                    {
                        title: "开水白菜",
                        index: "2-2-3"
                    },
                ]
            },
            {
                title: "粤菜",
                index: "2-3",
                children: [
                    {
                        title: "白切鸡",
                        index: "2-3-1"
                    },
                    {
                        title: "顺德鱼生",
                        index: "2-3-2"
                    },
                    {
                        title: "猪肚鸡",
                        index: "2-3-3"
                    },
                ]

            }
        ]
    },
    {
        title: "编程",
        index: "3",
        icon: User,
        children: [
            {
                title: "golang",
                index: "3-1",
                children: [
                    {
                        title: "云原生",
                        index: "3-1-1"
                    },
                    {
                        title: "gin",
                        index: "3-1-2"
                    }
                ]
            },
            {
                title: "js",
                index: "3-2"
            },
            {
                title: "python",
                index: "3-3"
            }
        ]
    }
]
// 默认index值
let defaultIndex = ref("0")
</script>

主要过程就是写了一个递归的菜单栏，然后用el-scrollbar包装了一下，以免这个菜单展开的时候把盒子高度撑开。

细节上难看了一点，此外我觉得整个菜单的高度应该和传入数组的最大深度相关，得把这个el-scrollbar组件换掉才行，先写着，有时间完善。