vue实现目录功能
实现目录功能的基本思路
在Vue中实现目录功能通常涉及动态生成基于页面内容的目录结构，并支持点击跳转。核心步骤包括：解析标题元素、生成目录树、实现滚动联动。
解析标题元素
使用document.querySelectorAll获取页面中所有标题标签（如h1-h6）。通过遍历这些元素，提取文本内容和id属性（若无则动态生成）：
const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'))
.filter(el => el.id)
.map(el => ({
id: el.id,
text: el.innerText,
level: parseInt(el.tagName.substring(1))
}));生成目录树组件
创建Vue组件渲染目录结构，使用递归组件处理多级嵌套：
<template>
<ul>
<li v-for="item in tree" :key="item.id">
<a :href="`#${item.id}`">{{ item.text }}</a>
<directory-tree v-if="item.children" :tree="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'DirectoryTree',
props: ['tree']
}
</script>滚动联动与高亮
通过IntersectionObserver实现滚动时自动高亮当前可见的目录项：
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.activeId = entry.target.id;
}
});
}, { threshold: 0.5 });
headings.forEach(heading => {
observer.observe(document.getElementById(heading.id));
});完整组件示例
<template>
<div class="toc-container">
<div v-for="item in toc" :key="item.id"
:class="['toc-item', `level-${item.level}`, { active: activeId === item.id }]">
<a :href="`#${item.id}`" @click.prevent="scrollTo(item.id)">{{ item.text }}</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
toc: [],
activeId: null
}
},
mounted() {
this.generateToc();
this.setupObserver();
},
methods: {
generateToc() {
this.toc = Array.from(document.querySelectorAll('h1, h2, h3'))
.filter(el => el.id)
.map(el => ({
id: el.id,
text: el.innerText,
level: parseInt(el.tagName.substring(1))
}));
},
setupObserver() {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.activeId = entry.target.id;
}
});
}, { threshold: 0.5 });
this.toc.forEach(item => {
observer.observe(document.getElementById(item.id));
});
},
scrollTo(id) {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
}
}
</script>
<style>
.toc-container {
position: fixed;
right: 20px;
top: 100px;
}
.toc-item {
padding: 4px 8px;
border-left: 2px solid #eee;
}
.toc-item.level-2 {
padding-left: 16px;
}
.toc-item.level-3 {
padding-left: 24px;
}
.toc-item.active {
border-left-color: #42b983;
font-weight: bold;
}
</style>动态更新处理
对于动态内容（如通过API加载的内容），需在内容更新后重新生成目录：
watch: {
content() {
this.$nextTick(() => {
this.generateToc();
this.setupObserver();
});
}
}性能优化建议
- 使用
debounce技术限制滚动事件处理频率 - 对大型文档实现虚拟滚动
- 缓存已处理的目录结构
- 使用
requestIdleCallback处理非紧急任务
通过以上方法可以实现完整的目录功能，包括自动生成、滚动联动和点击跳转。根据实际需求可调整层级深度、样式和交互细节。
