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();
    });
  }
}

性能优化建议

1. 使用debounce技术限制滚动事件处理频率
2. 对大型文档实现虚拟滚动
3. 缓存已处理的目录结构
4. 使用requestIdleCallback处理非紧急任务

通过以上方法可以实现完整的目录功能，包括自动生成、滚动联动和点击跳转。根据实际需求可调整层级深度、样式和交互细节。