vue 递归组件,
本文主要介绍Vue结合Element-Plus包递归组件实现目录的例子。本文介绍的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
前言将所有H标签进行规律性匹配并存储在数组中封装函数，将数组内容变成父子结构封装递归组件fold-item(使用前别忘了自己导入)。使用foldMenu中的递归组件来使用该效果。
前言
写个人博客网站的时候，用MarkDownIt把md解析成html，我一直在想，怎么才能实现他们可折叠的目录结构呢的公文？我有很多头衔(h1.h5)，而有些文章只有h2或h3。我必须在目录组件中逐个渲染这些标题才能达到目录效果吗？这个问题在某天看vue文档的时候解决了。如下。
没错，递归组件可以解决我的困惑。递归无非是调用我们自己。在我们写出合理的组件渲染逻辑后，我们在组件内部调用自己，这就是递归组件。请查看我接下来的解决步骤！
用正则匹配出所有的h标签并且保存在数组中
//str这里是MarkdownIt解析生成的html字符串。
常量菜单=[.str.matchAll(/h.*。*/小时/克)]
效果如下
封装函数，将数组中的内容变成父子结构
//我的每个菜单的类型
类菜单项{
标题：字符串
孩子？菜单项[]
type:number//类型1表示它是h1标记。
Index: number //index表示哪个H标签对应类型
构造器(
标题：字符串，
类型：数量，
指数：数字，
children: menuItem[]=[]
) {
this.title=标题
this.children=儿童
this.type=type
this.index=index
}
}
导出默认功能(菜单：any[]): any[] {
//保存所有h min标签
const arr: menuItem[]=[]
const arrIndex: number[]=新数组(7)。填充(0)
//用于保存上一层的节点。例如，如果我当前正在遍历一个type=3的项目，那么我需要知道它属于哪个type=2的项目。
//如果有，则添加到其子代，如果没有，则添加到pre[3]
const pre=新数组(7)。填充(空)
//记录h min是哪个标签(如h1)
设minType=null
for(菜单的常量项){
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项是否有内容，如果有，则添加到上一个子类中。
if (pre[type - 1]) {
pre[type-1]. children . push(menuitem)
}
//重置当前类型的项
pre[type]=menuitem
minType=minType？类型
//如果是最小的H标签，插入
if (type===minType) {
arr.push(菜单项)
}
}
返回arr
}
转换的arr结果如下。如您所见，数组中保存了两个顶级目录，子目录保存了内部子目录。
封装递归组件fold-item（在使用之前不要忘了导入自己哦）
脚本语言设置
从导入项目。/folditem . vue //自行导入
defineProps({
项目：{
类型：对象，
默认值：()=({})
}
})
/脚本
模板
！-如果您有孩子，将他们呈现为子菜单(折叠项)
模板v-if=item.children.length
El-子菜单：index=item.title
模板#标题
div class= title v-html= item . title /div
/模板
折叠项目
v-for=i in item.children
:key=i.title
:item=i
/折叠-项目
/El-子菜单
/模板
！-否则，它将呈现为菜单项-
模板v-else
El-menu-item:index= item . title @ click= scrollToItem(item)
模板#标题
div class= title v-html= item . title /div
/模板
/El-菜单项
/模板
/模板
style lang=less 范围。标题{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap
}
* v-deep . El-菜单项{
宽度：220px
行高：30px
高度：30px
}
* v-deep . El-子菜单{
宽度：220px
}
*深v型100 . El-子菜单_ _标题{
高度：30px
行高：30px
}
/风格
在foldMenu中使用递归组件
脚本语言设置
从导入foldItem ./foldItem.vue
defineProps({
菜单：{
类型：数组，
默认值：()=[]
}
})
/脚本
模板
div class=菜单标题目录/div
埃尔菜单
！-使用递归组件-
fold-item v-for= item in menu :key= item。 title :item= item /fold-item
/el-menu
/模板
style lang=less 范围
* v深。El-菜单{
边框：无；
}。菜单标题{
文本对齐：居中；
边距-底部：10px
}
/风格
使用效果
更复杂的目录结构也能胜任
到此这篇关于某视频剪辑软件结合元素加封装递归组件实现目录示例的文章就介绍到这了，更多相关Vue Element-Plus递归目录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。