使用 Vue3 实现文章目录功能
前言
这一段时间一直在做一个博客项目 Kila Kila Blog,找了一圈发现没有特别满足自己需求的目录组件,所以决定自己动手,完成一个满足以下预期目标的目录组件:
- 自动高亮选中当前正在阅读的章节
- 自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题
- 显示阅读进度
完成后的目录组件如下图左侧所示:
实现过程
由于标题之间有父子的关系,所以我们应该用树数据结构来解决这个问题。我们遍历文章容器中的所有标签,如果遇到 <h1>
、<h2>
这类标签,就创建一个节点,将其放到列表中,之后使用 v-for
指令来生成目录就行了。下面分析一下每个节点需要有哪些属性。
一个树的节点,应该具有的属性包括:父节点的指针 parent
、子节点的指针列表 children
,因为一个节点代表一个标题,所以还要包含:标题的 ID号 id
(用于 v-for
的 key
),标题名 name
(添加了标题的序号)、原始标题名 rawName
和标题的可见性 isVisible
,当我们点击标题时,应该滚动到标题的位置,所以还要有 scrollTop
属性。在我们遍历文章容器中的所有标签时,需要判断当前遇到的标签和上一个标签之间的父子关系,所以要有一个 level
属性代表每一个节点的等级。下面是具体实现代码:
<template> <div class="catalog-card" v-if="Object.keys(titles).length > 0"> <div class="catalog-card-header"> <div> <span ><font-awesome-icon :icon="['fas', 'bars-staggered']" class="catalog-icon" /></span> <span>目录</span> </div> <span class="progress">{{ progress }}</span> </div> <div class="catalog-content"> <div v-for="title in titles" :key="title.id" @click="scrollToView(title.scrollTop)" :class="[ 'catalog-item', currentTitle.id == title.id ? 'active' : 'not-active', ]" :style="{ marginLeft: title.level * 20 + 'px' }" v-show="title.isVisible" :title="title.rawName" > {{ title.name }} </div> </div> </div> </template> <script> import { reactive, ref } from "vue"; export default { name: "KilaKilaCatalog", setup(props) { let titles = reactive(getTitles()); let currentTitle = reactive({}); let progress = ref(0); // 获取目录的标题 function getTitles() { let titles = []; let levels = ["h1", "h2", "h3"]; let articleElement = document.querySelector(props.container); if (!articleElement) { return titles; } let elements = Array.from(articleElement.querySelectorAll("*")); // 调整标签等级 let tagNames = new Set( elements.map((el) => el.tagName.toLowerCase()) ); for (let i = levels.length - 1; i >= 0; i--) { if (!tagNames.has(levels[i])) { levels.splice(i, 1); } } let serialNumbers = levels.map(() => 0); for (let i = 0; i < elements.length; i++) { const element = elements[i]; let tagName = element.tagName.toLowerCase(); let level = levels.indexOf(tagName); if (level == -1) continue; let id = tagName + "-" + element.innerText + "-" + i; let node = { id, level, parent: null, children: [], rawName: element.innerText, scrollTop: element.offsetTop, }; if (titles.length > 0) { let lastNode = titles.at(-1); // 遇到子标题 if (lastNode.level < node.level) { node.parent = lastNode; lastNode.children.push(node); } // 遇到上一级标题 else if (lastNode.level > node.level) { serialNumbers.fill(0, level + 1); let parent = lastNode.parent; while (parent) { if (parent.level < node.level) { parent.children.push(node); node.parent = parent; break; } parent = parent.parent; } } // 遇到平级 else if (lastNode.parent) { node.parent = lastNode.parent; lastNode.parent.children.push(node); } } serialNumbers[level] += 1; let serialNumber = serialNumbers.slice(0, level + 1).join("."); node.isVisible = node.parent == null; node.name = serialNumber + ". " + element.innerText; titles.push(node); } return titles; } // 监听滚动事件并更新样式 window.addEventListener("scroll", function () { progress.value = parseInt( (window.scrollY / document.documentElement.scrollHeight) * 100 ) + "%"; let visibleTitles = []; for (let i = titles.length - 1; i >= 0; i--) { const title = titles[i]; if (title.scrollTop <= window.scrollY) { if (currentTitle.id === title.id) return; Object.assign(currentTitle, title); // 展开节点 setChildrenVisible(title, true); visibleTitles.push(title); // 展开父节点 let parent = title.parent; while (parent) { setChildrenVisible(parent, true); visibleTitles.push(parent); parent = parent.parent; } // 折叠其余节点 for (const t of titles) { if (!visibleTitles.includes(t)) { setChildrenVisible(t, false); } } return; } } }); // 设置子节点的可见性 function setChildrenVisible(title, isVisible) { for (const child of title.children) { child.isVisible = isVisible; } } // 滚动到指定的位置 function scrollToView(scrollTop) { window.scrollTo({ top: scrollTop, behavior: "smooth" }); } return { titles, currentTitle, progress, scrollToView }; }, props: { container: { type: String, default: ".post-body .article-content", }, }, }; </script> <style lang="less" scoped> .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; } } </style>
到此这篇关于使用 Vue3 实现文章目录功能的文章就介绍到这了,更多相关Vue3文章目录内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://www.cnblogs.com/zhiyiYo/p/16003255.html
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了Python3 实现将bytes图片转jpg格式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-08
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Python3中小括号()、中括号[]、花括号{}的区别详解
这篇文章主要介绍了Python3中小括号()、中括号[]、花括号{}的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-15- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01