运维开发网

用Vue3实现文章目录功能

运维开发网 https://www.qedev.com 2022-10-12 14:44 出处:网络
本文给大家分享如何使用vue3实现文章目录功能,特色功能主要是自动高亮选中当前正在阅读的章节,自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题,代码简单易懂,感兴趣的朋友跟随小编一起看看吧 前言


本文给大家分享如何使用vue3实现文章目录功能,特色功能主要是自动高亮选中当前正在阅读的章节,自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题,代码简单易懂,感兴趣的朋友跟随小编一起看看吧 前言

我从事博客项目Kila Kila Blog已经有一段时间了,我发现没有专门满足我需求的目录组件,所以我决定自己动手,完成一个符合以下预期目标的目录组件:

自动高亮选中当前正在阅读的章节自动展开当前正在阅读的章节的子标题,并隐藏其他章节的子标题显示阅读进度

完成的目录组件显示在下图的左侧:


实现过程

因为标题之间是父子关系,所以要用树形数据结构来解决这个问题。我们遍历文章容器中的所有标签,如果遇到lt;h1gt、lt;h2gt对于这种标记,只需创建一个节点,将其放入列表中,然后使用v-for命令生成目录。我们来分析一下每个节点需要什么属性。

树的节点应该具有以下属性:父节点的指针父节点和子节点的指针列表子节点。因为一个节点代表一个标题,所以它还包括标题的ID号(key for v-for)、标题名(添加标题的序列号)、原标题名rawName和标题的可见性isVisible。我们在点击标题的时候,要scrollTop标题位置,所以我们在遍历文章容器中的所有标签的时候,也要判断当前遇到的标签和上一个标签的父子关系,所以要有一个level属性来表示每个节点的级别。以下是具体的实现代码:

lt;templategt; lt;div class="catalog-card" v-if="Object.keys(titles).length gt; 0"gt; lt;div class="catalog-card-header"gt; lt;divgt; lt;span gt;lt;font-awesome-icon :icon="['fas', 'bars-staggered']" class="catalog-icon" /gt;lt;/spangt; lt;spangt;目录lt;/spangt; lt;/divgt; lt;span class="progress"gt;{{ progress }}lt;/spangt; lt;/divgt; lt;div class="catalog-content"gt; lt;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" gt; {{ title.name }} lt;/divgt; lt;/divgt; lt;/divgt;lt;/templategt;lt;scriptgt;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) =gt; el.tagName.toLowerCase()) ); for (let i = levels.length - 1; i gt;= 0; i--) { if (!tagNames.has(levels[i])) { levels.splice(i, 1); } } let serialNumbers = levels.map(() =gt; 0); for (let i = 0; i lt; 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 gt; 0) { let lastNode = titles.at(-1); // 遇到子标题 if (lastNode.level lt; node.level) { node.parent = lastNode; lastNode.children.push(node); } // 遇到上一级标题 else if (lastNode.level gt; node.level) { serialNumbers.fill(0, level + 1); let parent = lastNode.parent; while (parent) { if (parent.level lt; 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 gt;= 0; i--) { const title = titles[i]; if (title.scrollTop lt;= 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", }, },};lt;/scriptgt;lt;style lang="less" scopedgt;.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 gt; 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; amp;:hover { color: #1892ff; }}.active { background-color: #; color: white; amp;:hover { background-color: #0c82e9; color: white; }}lt;/stylegt;

关于使用Vue3实现文章目录功能的文章到此结束。更多相关Vue3文章目录内容,请搜索SourceSearch.com以前的文章或继续浏览下面的相关文章

0

精彩评论

暂无评论...
验证码 换一张
取 消