徐州建筑网站,了解网站开发的一般过程,密云网站建设服务,查工程项目的网站自己的项目要写一个竖栏菜单#xff0c;所以记录一下思路吧#xff0c;先粗糙的实现一把#xff0c;有机会再把细节修饰一下
功能上就是无论这个菜单有多少层级#xff0c;都能显示出来#xff0c;另外#xff0c;需要带图标#xff0c;基于element-plus写成#xff0…自己的项目要写一个竖栏菜单所以记录一下思路吧先粗糙的实现一把有机会再把细节修饰一下
功能上就是无论这个菜单有多少层级都能显示出来另外需要带图标基于element-plus写成当这个菜单栏点开的时候最好整个页面的高度不要有变化最后整成了个小草稿
MyMenu.vue
template!-- 自己写的竖栏菜单组件 --!-- el-menu styleheight: 100%;width:100% --el-scrollbar max-height100%el-menu stylewidth: 100%;border: 0; unique-opened :default-activeprops.defaultIndex active-text-color#ffd04bbackground-color#545c64 text-color#fffMenuTree :menu-dataprops.data/MenuTree/el-menu/el-scrollbar
/template
script langts setup
import MenuTree from ./MenuTree.vue
const propsdefineProps{data:Arrayany,defaultIndex:string}()
/script
里面有个递归组件
MenuTree.vue
template!-- 递归组件 --!-- 为了创建无限菜单而使用 --template v-forvalue in props.menuData!-- 没有children就是一个单标签 --el-menu-item v-if!value.children :indexvalue.indextemplate v-ifvalue.iconcomponent :isvalue.icon stylewidth: 1rem;/component/template{{ value.title }}/el-menu-item!-- 多标签的情况 --el-sub-menu v-else :indexvalue.indextemplate #titletemplate v-ifvalue.iconcomponent :isvalue.icon stylewidth: 1rem;/component/template span{{ value.title }}/span/templateMenuTree :menuDatavalue.children/MenuTree/el-sub-menu/template
/template
script setup langts
import MenuTree from ../Page1/MenuTree.vue
const propsdefineProps{menuData:Arrayany}()
/script
最后写个参数挂载一下我这边用的icon是element-plus组件自带的
templateel-container styleheight: 100vh;el-header stylepadding: 0;height: 5rem;div styleheight: 100%;background-color:pinkspanwelcome to page1/spanbr /span该页面用来写一个竖版menu/span/div/el-headerel-container styleheight: calc(100vh - 5rem);el-aside width15% stylebackground-color:lightblue;MyMenu :datamenuData :default-indexdefaultIndex//el-asideel-main stylebackground-color:rgb(246, 199, 11);component :isiconStr stylewidth: 1rem;/component/el-main/el-container/el-container
/template
script setup langts
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组件换掉才行先写着有时间完善。
