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

更新日期: 2022-03-14阅读: 915标签: 功能

前言

这一段时间一直在做一个博客项目 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>
作者:之一Yo
出处:https://www.cnblogs.com/zhiyiYo/p/16003255.html


链接: https://www.fly63.com/article/detial/11262

vue实现打印功能的两种方法

通过npm 安装插件,安装 npm install vue-print-nb --save.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

js简体繁体转换

繁体词库封装好的,直接就对应简体转换了, 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示,本程序只在UTF8编码下测试过,不保证其他编码有效

js剪切板_Clipboard.js 使用

clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素,并且需要用户的点击操作才能实现功能

使用 css/less 动态更换主题色(换肤功能)

说起换肤功能,前端应该是非常熟悉了?一般来说换肤的需求分为几种:1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器

在react中实现打印功能

我们知道,window.print()可以调起打印功能,但是直接用window.print()如果直接打印的话,没有样式,而且默认打印的是整个网页的内容。解决的方法可以用iframe方式引入需要打印的区域,并把样式添加进去

JS将货币小写转换为大写

JS将货币小写转换为大写,/** 数字金额大写转换(可以处理整数,小数,负数) */ [零, 壹,贰,叁,肆,伍,陆,柒,捌,玖]

如何较为优雅地实现新手引导功能?

早期的项目中晓衡遇到游戏终于要完成了,辛苦了一阵满以为可以稍微放松一下了,但策划、运营要求,增加一个他们认为非常“简单”且重要的功能: 新手引导 。

7个好用的TypeScript 新功能

在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 data 或 customer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

javascript如何实现计时功能?

JavaScript中可以使用setInterval()方法实现计时功能,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

5个CSS新功能

在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义。 有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!