vue实现目录
Vue 实现目录功能
在 Vue 中实现目录功能通常需要动态生成目录结构，并支持点击跳转到对应内容区域。以下是几种常见实现方式：
基于滚动监听和动态生成
安装依赖（如需）：
npm install vue-scrollto组件实现：
<template>
<div>
<div class="toc" v-if="headings.length">
<ul>
<li v-for="(heading, index) in headings" :key="index">
<a @click="scrollTo(heading.id)">{{ heading.text }}</a>
</li>
</ul>
</div>
<div class="content" v-html="content" ref="content"></div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto'
export default {
data() {
return {
headings: [],
content: '<h1 id="section1">Section 1</h1><p>Content...</p><h2 id="section2">Section 2</h2><p>More content...</p>'
}
},
mounted() {
this.generateTOC()
},
methods: {
generateTOC() {
const contentEl = this.$refs.content
const headingEls = contentEl.querySelectorAll('h1, h2, h3, h4, h5, h6')
this.headings = Array.from(headingEls).map(el => ({
id: el.id,
text: el.innerText,
level: parseInt(el.tagName.substring(1))
}))
},
scrollTo(id) {
VueScrollTo.scrollTo(`#${id}`, 500)
}
}
}
</script>
<style>
.toc {
position: fixed;
right: 20px;
top: 20px;
background: #f5f5f5;
padding: 10px;
border-radius: 4px;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc li {
margin: 5px 0;
}
.toc a {
cursor: pointer;
color: #333;
}
.toc a:hover {
text-decoration: underline;
}
</style>使用第三方库
对于更复杂的需求，可以使用专门库如 vue-toc：
安装：
npm install vue-toc使用示例：
<template>
<div>
<vue-toc :content="content" />
<div v-html="content"></div>
</div>
</template>
<script>
import VueToc from 'vue-toc'
export default {
components: { VueToc },
data() {
return {
content: '<h1>Title</h1><h2>Subtitle</h2><p>Content...</p>'
}
}
}
</script>动态路由目录
对于多页面应用的目录，可以结合 Vue Router：
<template>
<div>
<ul>
<li v-for="item in menuItems" :key="item.path">
<router-link :to="item.path">{{ item.title }}</router-link>
</li>
</ul>
<router-view />
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{ path: '/section1', title: 'Section 1' },
{ path: '/section2', title: 'Section 2' }
]
}
}
}
</script>响应式目录高亮
添加滚动监听实现当前目录项高亮：
mounted() {
window.addEventListener('scroll', this.onScroll)
},
methods: {
onScroll() {
const headings = document.querySelectorAll('h1, h2, h3')
let current = ''
headings.forEach(heading => {
const rect = heading.getBoundingClientRect()
if (rect.top <= 100) {
current = heading.id
}
})
this.activeHeading = current
}
}模板中添加高亮类：
<li v-for="heading in headings" :class="{ active: activeHeading === heading.id }">
<a @click="scrollTo(heading.id)">{{ heading.text }}</a>
</li>以上方法可根据具体需求选择或组合使用。对于内容动态加载的情况，需要在内容更新后重新调用 generateTOC 方法。
