自己的项目要写一个竖栏菜单，所以记录一下思路吧，先粗糙的实现一把，有机会再把细节修饰一下
功能上就是无论这个菜单有多少层级，都能显示出来，另外，需要带图标，基于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包装了一下，以免这个菜单展开的时候把盒子高度撑开。文章来源：https://www.toymoban.com/news/detail-622085.html
细节上难看了一点，此外我觉得整个菜单的高度应该和传入数组的最大深度相关，得把这个el-scrollbar组件换掉才行，先写着，有时间完善。文章来源地址https://www.toymoban.com/news/detail-622085.html
到了这里，关于递归竖栏菜单简单思路的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
