vue如何实现目录组件

实现目录组件的基本思路

在Vue中实现目录组件通常需要结合页面内容的结构化数据（如标题层级），通过动态渲染生成可交互的目录。核心步骤包括提取标题、生成目录结构、实现滚动联动等。

提取标题信息

通过document.querySelectorAll获取页面中所有标题元素（如h1-h6），并提取文本和层级信息：

const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'))
  .map(el => ({
    id: el.id || `${el.tagName}-${Math.random().toString(36).substr(2, 9)}`,
    text: el.innerText,
    level: parseInt(el.tagName.replace('H', ''), 10),
    element: el
  }));

动态渲染目录结构

使用Vue的v-for递归渲染多级目录，通过computed处理嵌套结构：

<template>
  <div class="toc">
    <div v-for="item in treeData" :key="item.id">
      <a :href="`#${item.id}`" @click.prevent="scrollTo(item.id)">
        {{ item.text }}
      </a>
      <toc-node v-if="item.children" :items="item.children"/>
    </div>
  </div>
</template>

<script>
export default {
  props: ['items'],
  computed: {
    treeData() {
      // 将扁平数组转换为树形结构
    }
  },
  methods: {
    scrollTo(id) {
      document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
    }
  }
};
</script>

实现滚动高亮

监听滚动事件，计算当前可见的标题并高亮对应目录项：

mounted() {
  window.addEventListener('scroll', this.onScroll);
},
methods: {
  onScroll() {
    const visibleHeading = this.headings.findLast(h => {
      const rect = h.element.getBoundingClientRect();
      return rect.top < window.innerHeight * 0.2;
    });
    this.activeId = visibleHeading?.id;
  }
}

优化性能与交互

使用IntersectionObserver替代滚动监听提高性能：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      this.activeId = entry.target.id;
    }
  });
}, { threshold: 0.5 });

this.headings.forEach(h => observer.observe(h.element));

完整组件示例

结合以上技术的完整组件实现：

<template>
  <div class="toc-container">
    <nav class="toc">
      <toc-node :items="treeData" :active-id="activeId"/>
    </nav>
  </div>
</template>

<script>
import TocNode from './TocNode.vue';

export default {
  components: { TocNode },
  data() {
    return {
      headings: [],
      activeId: '',
      observer: null
    };
  },
  computed: {
    treeData() {
      // 树形结构转换逻辑
    }
  },
  mounted() {
    this.initHeadings();
    this.setupObserver();
  },
  methods: {
    initHeadings() {
      this.headings = Array.from(document.querySelectorAll('h1, h2, h3'))
        .map(el => ({ /* 提取数据 */ }));
    },
    setupObserver() {
      this.observer = new IntersectionObserver(/* 参数 */);
      this.headings.forEach(h => this.observer.observe(h.element));
    }
  }
};
</script>

样式设计建议

添加基础样式增强可用性：

.toc-container {
  position: sticky;
  top: 20px;
}

.toc a {
  display: block;
  padding: 4px 0;
  color: inherit;
  text-decoration: none;
}

.toc a.active {
  font-weight: bold;
  color: #42b983;
}

.toc ul {
  list-style: none;
  padding-left: 1em;
}