如何使用Vue3实现文章目录功能

这篇文章主要为大家展示了"如何使用Vue3实现文章目录功能"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"如何使用Vue3实现文章目录功能"这篇文章吧。

前言

这一段时间一直在做一个博客项目 Kila Kila Blog，找了一圈发现没有特别满足自己需求的目录组件，所以决定自己动手，完成一个满足以下预期目标的目录组件：

• 自动高亮选中当前正在阅读的章节

• 自动展开当前正在阅读的章节的子标题，并隐藏其他章节的子标题

• 显示阅读进度

完成后的目录组件如下图左侧所示：

实现过程

由于标题之间有父子的关系，所以我们应该用树数据结构来解决这个问题。我们遍历文章容器中的所有标签，如果遇到

、

这类标签，就创建一个节点，将其放到列表中，之后使用 v-for 指令来生成目录就行了。下面分析一下每个节点需要有哪些属性。

一个树的节点，应该具有的属性包括：父节点的指针 parent、子节点的指针列表 children，因为一个节点代表一个标题，所以还要包含：标题的 ID号 id（用于 v-for 的 key），标题名 name（添加了标题的序号）、原始标题名 rawName 和标题的可见性 isVisible，当我们点击标题时，应该滚动到标题的位置，所以还要有 scrollTop 属性。在我们遍历文章容器中的所有标签时，需要判断当前遇到的标签和上一个标签之间的父子关系，所以要有一个 level 属性代表每一个节点的等级。下面是具体实现代码：

以上是"如何使用Vue3实现文章目录功能"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！