目次は記事を読むときに非常に一般的な機能です。この記事で紹介するポイントがすぐにわかるだけでなく、タイトルをすぐに見つけるのにも役立ちます。
私の実装方法を見てみましょう。
1. 参照を設定する
<div v-html="xxx" ref="ff">
<!---内容区域--->
</div>
2. 記事内のサブタイトルを取得します。
getTitle() {
// 生成目录
this.$nextTick(() => {
// 根据之前设置的ref来获取文章的小标题
const article_content = this.$refs.ff;//这里的ff改成你具体设置的
// 想获取的标题,将想获取的小标题的标签添加到这
const titleTag = ["H1", "H2", "H3"];
//存放小标题的数组
let titles = [];
article_content.childNodes.forEach((e, index) => {
//具体执行步骤,比如:打印看看
console.log(e, index);
if (titleTag.includes(e.nodeName)) {
//具体封装过程
console.log(e.nodeName);
const id = "header-" + index;
// 设置元素id
e.setAttribute("id", id);
titles.push({
id: id,
title: e.innerHTML,
level: Number(e.nodeName.substring(1, 2)),
nodeName: e.nodeName,
//read:后期主要用来判断当前阅读的是哪一个小标题的内容
read:false
});
}
});
//再data中定义catalog
this.catalog = titles;
console.log("23", this.catalog);
});
},
3. 記事ディレクトリを表示する
<div class="colum">
<h2>目录</h2>
<ul class="catalog">
<template v-for="(item, index) in catalog">
<!---根据read属性(前面又说),动态绑定样式:为true即为正在阅读此内容--->
<li
:key="index"
:style="{ paddingLeft: item.level * 30 - 44 + 'px'}"
:class="{'cc':item.read == true}"
>
<!---设置href,用于目录的跳转;动态绑定id,判断当前正在阅读的是哪一个小标题的内容--->
<a :href="'#' + item.id" :id="item.id">{
{ item.title }}</a>
</li>
</template>
</ul>
</div>
<style>
.cc{
background-color: rgb(254,242,235);
}
</style>
4. どの字幕コンテンツが読まれているかを決定する
原則:字幕と画面上部の距離で判断します。
getReading(){
//获取页面滚动值
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//遍历小标题
for(let i=0;i<this.catalog.length;i++){
//获取小标题距离屏幕顶端的距离
var offsetTop = document.querySelector("#"+this.catalog[i].id).offsetTop;
//根据条件做出判断,我这里是当小标题和屏幕顶端的距离小于300且没有被标明在读时,就将其背景颜色改变。
if((offsetTop-scrollTop)<300&&(offsetTop-scrollTop)>0&&this.catalog[i].read==false){
this.catalog[i].read = true
//再将其他小标题背景色改成未读的背景色
for(let j=0;j<this.catalog.length;j++){
if(j!=i){
this.catalog[j].read = false
}
}
}
}
}