以下文章来源于web前端开发
前言 这一段时间一直在做一个博客项目 Kila Kila Blog，找了一圈发现没有特别满足自己需求的目录组件，所以决定自己动手，完成一个满足以下预期目标的目录组件：
自动高亮选中当前正在阅读的章节
自动展开当前正在阅读的章节的子标题，并隐藏其他章节的子标题
显示阅读进度
实现过程
由于标题之间有父子的关系，所以我们应该用树数据结构来解决这个问题。我们遍历文章容器中的所有标签，如果遇到 h 这类标签，就创建一个节点，将其放到列表中，之后使用 v-for 指令来生成目录就行了。下面分析一下每个节点需要有哪些属性_前端培训。
一个树的节点，应该具有的属性包括：父节点的指针 parent、子节点的指针列表 children，因为一个节点代表一个标题，所以还要包含：标题的 ID号 id（用于 v-for 的 key），标题名 name（添加了标题的序号）、原始标题名 rawName 和标题的可见性 isVisible，当我们点击标题时，应该滚动到标题的位置，所以还要有 scrollTop 属性。
在我们遍历文章容器中的所有标签时，需要判断当前遇到的标签和上一个标签之间的父子关系，所以要有一个 level 属性代表每一个节点的等级_web前端培训。
下面是具体实现代码：
.catalog-card { background: white; border-radius: 8px; box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); padding: 20px 24px; width: 100%; margin-top: 25px; box-sizing: border-box; } .catalog-card-header { text-align: left !important; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; } .catalog-icon { font-size: 18px; margin-right: 10px; color: dodgerblue; } .catalog-card-header div > span { font-size: 17px; color: #4c4948; } .progress { color: #a9a9a9; font-style: italic; font-size: 140%; } .catalog-content { max-height: calc(100vh - 120px); overflow: auto; margin-right: -24px; padding-right: 20px; } .catalog-item { color: #666261; margin: 5px 0; line-height: 28px; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 14px; padding: 2px 6px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; &:hover { color: #1892ff; } } .active { background-color: #; color: white; &:hover { background-color: #0c82e9; color: white; } }
