怎么做外网的网站,百度收录网站入口,外包装设计网站,企业网站建设成都文章目录 前言一、递归的意义二、递归组件的实现——基于element-plus UI的多级导航栏2.1 element-plus Menu菜单官方示例2.2 接口定义2.3 组件递归2.4 父组件封装递归组件 三、完整代码——基于element-plus UI的多级导航栏3.1 组件架构3.2 types.ts3.3 menuTreeItem.vue3.4 i… 文章目录 前言一、递归的意义二、递归组件的实现——基于element-plus UI的多级导航栏2.1 element-plus Menu菜单官方示例2.2 接口定义2.3 组件递归2.4 父组件封装递归组件 三、完整代码——基于element-plus UI的多级导航栏3.1 组件架构3.2 types.ts3.3 menuTreeItem.vue3.4 index.vue3.5 组件调用与运行结果 总结 前言
在日常工作中我能经常能碰到那种自引用类似的数据结构。比方说树形的导航栏结构我们期望Vue渲染时递归遍历组件树直到叶子节点。一个组件在其自身的模板中调用自身的组件这便是Vue中的递归组件。 一、递归的意义
想象一个这样的一个对象数组。每个对象有基本的path路径name名称label标签icon图标。这四个属性是必须的个别对象本身有children属性包含它的子菜单内容。并且children属性本身也是对应一个包含pathnamelabelicon四个基本属性和children可选属性的对象。
这样的话我们就构建了一个典型的自引用类似的数据结构相互之间互相嵌套。相信大家已经发现了在我们不知道嵌套深度的情况下是没法通过循环完整解析出全部数据。并且递归的逻辑复用性是优于循环。这样的结果也会使递归在代码居然简洁性灵活性方便扩展性。
二、递归组件的实现——基于element-plus UI的多级导航栏 完整代码在第三节 2.1 element-plus Menu菜单官方示例
我们接下来要开发的多级导航栏是基于element-plus的menu菜单组件。观察官方代码结构组件最由el-menu标签包裹el-sub-menu为一级菜单内嵌的el-menu-item为一级菜单的子内容。但el-sub-menu里面也可以继续添加el-sub-menu标签作为一个二级菜单。实现组件树的结构。
树状导航栏代码如下
el-menu !-- 最外层菜单容器 --├─ el-sub-menu !-- 一级菜单可展开 --│ ├─ 菜单标题含图标和文本│ └─ el-sub-menu !-- 二级菜单嵌套在一级菜单内 --│ ├─ 二级菜单标题│ └─ el-menu-item !-- 二级菜单子项 --├─ el-menu-item !-- 一级菜单子项非展开项 --└─ el-menu-item !-- 一级菜单子项 --
/el-menu完整实例代码
templateel-row classtacel-col :span12h5 classmb-2Default colors/h5el-menudefault-active2classel-menu-vertical-demoopenhandleOpenclosehandleCloseel-sub-menu index1template #titleel-iconlocation //el-iconspanNavigator One/span/templateel-menu-item-group titleGroup Oneel-menu-item index1-1item one/el-menu-itemel-menu-item index1-2item two/el-menu-item/el-menu-item-groupel-menu-item-group titleGroup Twoel-menu-item index1-3item three/el-menu-item/el-menu-item-groupel-sub-menu index1-4template #titleitem four/templateel-menu-item index1-4-1item one/el-menu-item/el-sub-menu/el-sub-menuel-menu-item index2el-iconicon-menu //el-iconspanNavigator Two/span/el-menu-itemel-menu-item index3 disabledel-icondocument //el-iconspanNavigator Three/span/el-menu-itemel-menu-item index4el-iconsetting //el-iconspanNavigator Four/span/el-menu-item/el-menu/el-col/el-row
/templatescript langts setup
import {Document,Menu as IconMenu,Location,Setting,
} from element-plus/icons-vue
const handleOpen (key: string, keyPath: string[]) {console.log(key, keyPath)
}
const handleClose (key: string, keyPath: string[]) {console.log(key, keyPath)
}
/script2.2 接口定义
定义组件的对象数组结构。path路径name名称label标签icon图标这四个属性是必须的。个别对象本身有children属性包含它的子菜单内容。
export interface NavTreeMenuItem {path: string;name?: string;label: string;icon: string;children?: NavTreeMenuItem[];
}2.3 组件递归
vue3中实现递归组件是组件在其模板中直接调用自身。比如我定义了一个组件名称叫menuTreeItem.vue我就可以在该vue文件内直接调用menuTreeItem。这是基于这主要归功于Vue 3 单文件组件的编译时处理机制和 script setup 的特性。
在menuTreeItem.vue的el-sub-menu节点里判断children属性是否有值并且没有超过最大递归深度。
值得注意的是使用递归方法要注意无限递归这个漏洞风险需要设置最大深度避免无限递归
menuTreeItem.vue文件片段
templatetemplate v-foritem in treeData :keyitem.path :indexitem.pathel-sub-menu v-ifitem.children item.children.length 0 currentDepth maxDepth :indexitem.path!-- --menuTreeItem :tree-dataitem.children :current-depthcurrentDepth 1:max-depthmaxDepth/menuTreeItem!-- --/el-sub-menu/template
/template
2.4 父组件封装递归组件
前文我们把需要递归的组件封装成单独子组件最后嵌套在父组件里防止不必要的内容被遍历渲染。
templateel-aside :style{ width: menuWidth }h3 classmb-2 v-once后台系统/h3div classsidebar-menuel-menu default-active2 classmy-el-menu openhandleOpen closehandleClosemenuTreeItem :tree-datatreeData :max-depth5/menuTreeItem/el-menu/div/el-aside
/template三、完整代码——基于element-plus UI的多级导航栏
3.1 组件架构
navigationAside ├─ index.vue !-- 核心组件 --├─ menuTreeItem.vue !-- 递归组件 --└─ types.ts !-- 接口类型 --
/el-menu3.2 types.ts
export interface NavTreeMenuItem {path: string;name?: string;label: string;icon: string;url?: string;children?: NavTreeMenuItem[];
}3.3 menuTreeItem.vue
templatetemplate v-foritem in treeData :keyitem.path :indexitem.pathel-sub-menu v-ifitem.children item.children.length 0 currentDepth maxDepth :indexitem.pathtemplate #titlecomponent classicons :isitem.icon/componentspan{{ item.label }}/span/templateMenuTreeItem :tree-dataitem.children :isRootfalse :current-depthcurrentDepth 1:max-depthmaxDepth/MenuTreeItem/el-sub-menuel-menu-item v-else :indexitem.pathcomponent classicons :isitem.icon/componentspan{{ item.label }}/span/el-menu-item/template
/templatescript langts setup
import { useRouter } from vue-router
const router useRouter()
import {Document,Menu as IconMenu,Location,Setting,
} from element-plus/icons-vue
import { NavTreeMenuItem } from ./typesconst props withDefaults(defineProps{treeData: NavTreeMenuItem[];isRoot?: boolean;currentDepth?: number; // 当前深度maxDepth?: number; // 最大深度
}(), {isRoot: true,currentDepth: 1, // 默认当前深度为1maxDepth: 3 // 默认最大深度为3
})
/scriptstyle langless scoped
:deep(.icons) {height: 18px;margin-right: 5px;width: 18px;
}
/style3.4 index.vue
templateel-aside :style{width: menuWidth}h3 v-if!isCollapse classmb-2 v-once天津城安远传系统/h3h3 v-else classmb-2 v-once远传/h3div classsidebar-menuel-menu default-active2classmy-el-menu :collapseisCollapseopenhandleOpen closehandleClose menuTreeItem :tree-datatreeData :max-depth5/menuTreeItem/el-menu/div/el-aside
/templatescript langts setup
import { ref, computed } from vue
import { useRouter } from vue-router
import {useWebSettingDataStore} from ../../storesimport menuTreeItem from ./menuTreeItem.vue
const router useRouter()
import {Document,Menu as IconMenu,Location,Setting,
} from element-plus/icons-vue
import { NavTreeMenuItem } from ./typesconst props defineProps{treeData: NavTreeMenuItem[];isRoot?: boolean;
}();const store useWebSettingDataStore()
const isCollapse computed(() store.state.isCollapse);
const menuWidth computed(() store.state.isCollapse ? 64px : 180px)const handleOpen (key: string, keyPath: string[]) {console.log(open)console.log(key, keyPath)
}
const handleClose (key: string, keyPath: string[]) {console.log(close)console.log(key, keyPath)
}
/scriptstyle langless scoped
.el-menu {border-right: none;height: 100%;
}.el-aside {display: flex;flex-direction: column;//border-right: 1px solid #e4e7ed;background-color: #304156;h3 {line-height: 13px;color: #fff;text-align: center;flex-shrink: 0;/* 防止被压缩 */}
}.sidebar-menu {flex: 1;overflow-y: auto;padding: 10px 0;
}/* 可选美化滚动条 */
.sidebar-menu::-webkit-scrollbar {width: 4px;
}.sidebar-menu::-webkit-scrollbar-thumb {background-color: #bfcbd9;border-radius: 3px;
}.my-el-menu{--el-menu-bg-color: #304156;--el-menu-text-color: #bfcbd9;--el-menu-hover-bg-color: #263445;--el-menu-active-color: #409eff;
}
/style3.5 组件调用与运行结果
commNavigationAside :tree-datanavTreeData/commNavigationAside
import commNavigationAside from /components/navigationAside/index.vue总结
本文基于 Vue3 和 Element Plus通过递归组件实现了可动态渲染的多级导航栏利用自引用数据结构和深度控制避免无限循环同时结合 TypeScript 规范数据类型并优化组件封装。
