vue实现书籍目录

实现书籍目录的基本思路

在Vue中实现书籍目录功能，可以通过组件化的方式构建。目录通常包含章节标题和嵌套的子章节，需要支持展开/折叠功能。核心是递归组件和动态数据绑定。

数据结构的定义

使用树形结构表示目录层级关系，每个节点包含标题、唯一标识符和子节点数组：

data() {
  return {
    chapters: [
      {
        id: 1,
        title: "第一章",
        children: [
          {
            id: 11,
            title: "第一节",
            children: []
          }
        ]
      }
    ]
  }
}

递归组件实现

创建ChapterItem组件处理嵌套渲染：

<template>
  <div class="chapter">
    <div @click="toggle" class="chapter-title">
      {{ chapter.title }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren" class="children">
      <chapter-item 
        v-for="child in chapter.children" 
        :key="child.id"
        :chapter="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChapterItem',
  props: {
    chapter: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.chapter.children && this.chapter.children.length
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

样式设计

添加基础样式增强交互体验：

.chapter {
  margin-left: 20px;
  cursor: pointer;
}
.chapter-title {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
.chapter-title:hover {
  background-color: #f5f5f5;
}

完整组件集成

在主组件中使用递归组件：

<template>
  <div class="book-toc">
    <chapter-item 
      v-for="chapter in chapters" 
      :key="chapter.id"
      :chapter="chapter"
    />
  </div>
</template>

<script>
import ChapterItem from './ChapterItem.vue'

export default {
  components: { ChapterItem },
  data() {
    return {
      chapters: [...]
    }
  }
}
</script>

动态高亮当前章节

添加当前活跃章节的高亮效果：

// 在ChapterItem组件中
props: {
  activeId: [String, Number]
},
computed: {
  isActive() {
    return this.chapter.id === this.activeId
  }
}

.active {
  color: #409eff;
  font-weight: bold;
}

滚动定位功能

实现点击目录跳转到对应内容区域：

methods: {
  scrollToChapter() {
    const el = document.getElementById(`chapter-${this.chapter.id}`)
    if (el) el.scrollIntoView({ behavior: 'smooth' })
  }
}

响应式设计优化

添加媒体查询适应不同屏幕尺寸：

@media (max-width: 768px) {
  .book-toc {
    width: 100%;
  }
}

性能优化建议

对于大型目录结构，可以考虑：

• 虚拟滚动技术
• 异步加载深层目录
• 使用Vue的keep-alive缓存组件状态