当前位置：首页 > VUE

vue实现文章目录

2026-03-27 01:24:14VUE

实现文章目录的基本思路

在Vue中实现文章目录的核心是通过解析文章内容中的标题标签（如<h1>至<h6>），动态生成目录结构并支持点击跳转。以下是具体实现方法：

解析文章标题

使用document.querySelectorAll获取文章区域内的所有标题元素，通常需要限定范围（如文章容器）：

const headings = document.querySelectorAll('.article-container h1, h2, h3, h4, h5, h6');

过滤并提取标题的textContent和id（若无id需动态生成）：

const tocItems = Array.from(headings).map(heading => ({
  text: heading.textContent,
  id: heading.id || generateUniqueId(),
  level: parseInt(heading.tagName.substring(1)) // 提取h1->1, h2->2等
}));

动态生成目录组件

创建Vue组件（如TOC.vue）渲染目录列表，支持层级缩进：

vue实现文章目录

<template>
  <ul class="toc-list">
    <li v-for="item in items" :key="item.id" :class="`toc-level-${item.level}`">
      <a :href="`#${item.id}`" @click.prevent="scrollTo(item.id)">{{ item.text }}</a>
    </li>
  </ul>
</template>

样式通过CSS控制层级缩进：

.toc-level-2 { padding-left: 1em; }
.toc-level-3 { padding-left: 2em; }
/* 其他层级同理 */

平滑滚动与高亮当前章节

通过scrollTo方法实现点击跳转，并监听滚动事件高亮当前阅读位置：

methods: {
  scrollTo(id) {
    const target = document.getElementById(id);
    if (target) {
      window.scrollTo({
        top: target.offsetTop,
        behavior: 'smooth'
      });
    }
  }
},
mounted() {
  window.addEventListener('scroll', this.updateActiveTOC);
}

高亮逻辑可通过比较标题元素的offsetTop与当前滚动位置实现。

vue实现文章目录

响应式目录折叠（可选）

添加折叠功能提升移动端体验：

<li v-for="item in items" @click="toggleCollapse(item)">
  <span v-if="item.children">▶</span>
  {{ item.text }}
</li>

通过v-show控制子目录显示/隐藏，并动态切换图标（▶/▼）。

完整示例代码

整合后的组件代码结构：

<template>
  <div class="toc-wrapper">
    <ul>
      <li v-for="item in tocItems" :class="`level-${item.level}`">
        <a :href="`#${item.id}`" :class="{ active: activeId === item.id }">
          {{ item.text }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tocItems: [],
      activeId: ''
    };
  },
  mounted() {
    this.generateTOC();
    window.addEventListener('scroll', this.onScroll);
  },
  methods: {
    generateTOC() {
      // 解析标题逻辑
    },
    onScroll() {
      // 高亮逻辑
    }
  }
};
</script>