二级标题
<!-- 目录栏 -->
<section class="toc">
<div class="title">文章目录</div>
<!-- 遍历目录 -->
<ul>
<li
v-for="(item, index) in tocs"
:key="index"
class="mean"
:class="{ on: item.click }"
>
// a标签锚点跳转
<a
@click.stop="scrollToPosition(item)"
v-html="item.name"
:class="{ child: item.type, childh4: item.h4type }"
:title="item.name"
></a>
</li>
</ul>
</section>
updated() {
// 监听滚动事件
document
.getElementsByClassName('mavon')[0]
.addEventListener('scroll', this.dataScroll, true)
},
watch: {
// 监听scroll变量,只要滚动条位置变化就会执行方法loadScroll
scroll() {
this.loadScroll()
}
},
methods: {
// 锚点跳转后,目录栏实现目录高亮
loadScroll() {
for (let item of this.tocs) {
if (this.scroll >= item.href.offsetTop - 80) {
}
}
},
dataScroll() {
this.scroll =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop
},
// 获取文章目录标签
getTocs() {
let aArr = []
setTimeout(() => {
aArr = document.getElementsByClassName('mavon')[0].querySelectorAll('a')
this.tocs = []
let tocs = []
for (let item of aArr) {
if (item.id) {
tocs.push({
href: item.id,
name: item.nextSibling.data
})
}
}
// 获取的目录是重复,写了一个去重的方法去重
this.tocs = this.setNum(tocs)
}, 500)
},
// 实现滚动
scrollToPosition(item) {
for (let data of this.tocs) {
// 用name判断
this.$set(data, 'click', data.name === item.name)
}
setTimeout(() => {
document
.getElementById(item.href)
// scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
.scrollIntoView({ behavior: 'smooth', block: 'start' })
}, 300)
},
}
1.实现功能的时候考虑过使用mavonEditor的原本的属性去实现这个需求,但是跟ui设计不相符,滚动过程是比较流畅的,但是不能完美匹配需求。放弃这个方法
2后续考虑过使用原生js:获取文档遍历的目录所属id去定位文档所在位置,可以解决UI设计以及功能的需要,但是由于定位目录所在位置的滚动过程不流畅,定位存在累加的偏差,回到文档头部位置定位不精准的原因放弃。。下图是实现过程,且代码量片偏多