Vue结合Element-Plus封装递归组件实现目录示例 Vue结合Element-Plus封装递归组件

前言
用正则匹配出所有的h标签并且保存在数组中
封装函数，将数组中的内容变成父子结构
封装递归组件fold-item（在使用之前不要忘了导入自己哦）
在foldMenu中使用递归组件
使用效果

前言在写我的个人博客网站，用MarkDownIt将md解析成html时，我一直在想，怎么才能实现官方文档他们那些可折叠的目录结构呢？我有那么多标题（h1...h5），而且有的文章是只有h2或者h3的，难道我要在目录组件里面一个个v-if来渲染这些标题达到目录的效果嘛？这个问题在我某一天看vue文档的时候得到了解决。如下。

文章图片

没错，递归组件可以解决我这个困惑，递归无非就是自己调用自己，我们编写好合理的组件渲染逻辑之后，在组件内部自己调用自己，这就是递归组件，接下来请看我的解决步骤吧！

用正则匹配出所有的h标签并且保存在数组中

//这里的str是用MarkdownIt解析生成的html字符串const menu = [...str.matchAll(/.*/g)]

效果如下

文章图片

封装函数，将数组中的内容变成父子结构

//我的每个菜单的类型class menuItem {title: stringchildren?: menuItem[]type: number//type为1表示是h1标签index: number//index表示是type对应的第几个h标签constructor(title: string,type: number,index: number,children: menuItem[] = []) {this.title = titlethis.children = childrenthis.type = typethis.index = index}}export default function (menu: any[]): any[] {//保存所有h min标签const arr: menuItem[] = []const arrIndex: number[] = new Array(7).fill(0)// 用于保存前一个层的结点。例如我当前遍历的是type=3的item，那么我需要知道它所属于哪个type=2的item// 如果有就添加到它的children中，如果没有就添加到pre[3]中const pre = new Array(7).fill(null)//记录h min是哪个标签（例如h1）let minType = nullfor (const item of menu) {const content = item[0]const type = parseInt(content[2])const title = content.split(/<\/?h.>/)[1]const menuitem = new menuItem(title, type, arrIndex[type]++)//判断当前type-1项有没有内容，有的话就加入到前一个种类的children中去if (pre[type - 1]) {pre[type - 1].children.push(menuitem)}//重置当前type的项pre[type] = menuitemminType = minType ?? type//如果是最小的h标签，就插入if (type === minType) {arr.push(menuitem)}}return arr}

转换的arr结果如下，可以看到，数组中保存了两个顶层目录，children保存了内部的子目录。

文章图片

封装递归组件fold-item（在使用之前不要忘了导入自己哦）

.title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }::v-deep.el-menu-item {width: 220px; line-height: 30px; height: 30px; }::v-deep.el-sub-menu {width: 220px; }::v-deep .el-sub-menu__title {height: 30px; line-height: 30px; }

在foldMenu中使用递归组件

::v-deep.el-menu {border: none; }.menu-title {text-align: center; margin-bottom: 10px; }

使用效果

文章图片

更复杂的目录结构也能胜任

文章图片

【Vue结合Element-Plus封装递归组件实现目录示例】到此这篇关于Vue结合Element-Plus封装递归组件实现目录示例的文章就介绍到这了,更多相关Vue Element-Plus递归目录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！