vue实现目录功能

实现目录功能的基本思路

在Vue中实现目录功能通常需要结合路由和动态组件。目录功能的核心是根据页面内容动态生成导航链接，允许用户快速跳转到不同部分。

使用Vue Router实现基础目录

安装Vue Router并配置路由是创建目录功能的基础。在路由配置中定义各个章节对应的路径。

const routes = [
  { path: '/chapter1', component: Chapter1 },
  { path: '/chapter2', component: Chapter2 }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

创建目录组件

构建一个可复用的目录组件，该组件应能自动生成基于路由的导航链接。

<template>
  <div class="toc">
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link :to="route.path">{{ route.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes.filter(r => r.name)
    }
  }
}
</script>

实现页面内锚点跳转

对于长页面中的章节跳转，可以使用HTML锚点结合Vue的滚动行为控制。

<template>
  <div>
    <div id="section1">...</div>
    <div id="section2">...</div>
  </div>
</template>

在路由配置中添加滚动行为：

const router = createRouter({
  scrollBehavior(to) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
  }
})

动态生成目录结构

对于内容动态生成的页面，可以通过解析DOM结构自动创建目录。

export default {
  data() {
    return {
      headings: []
    }
  },
  mounted() {
    this.generateTOC()
  },
  methods: {
    generateTOC() {
      const elements = document.querySelectorAll('h2, h3')
      this.headings = Array.from(elements).map(el => ({
        id: el.id,
        text: el.textContent,
        level: parseInt(el.tagName.substring(1))
      }))
    }
  }
}

添加目录状态管理

使用Vuex或组合式API管理目录的展开/折叠状态。

import { ref } from 'vue'

export function useTOC() {
  const isExpanded = ref(true)
  const toggleTOC = () => {
    isExpanded.value = !isExpanded.value
  }

  return { isExpanded, toggleTOC }
}

响应式目录样式

为目录添加响应式样式，确保在不同设备上都能良好显示。

.toc {
  position: fixed;
  max-width: 250px;
}

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

目录高亮当前章节

通过监听滚动事件或使用Intersection Observer API实现当前章节高亮。

export default {
  data() {
    return {
      activeSection: null
    }
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll)
  },
  methods: {
    onScroll() {
      const sections = document.querySelectorAll('section')
      sections.forEach(section => {
        const rect = section.getBoundingClientRect()
        if (rect.top <= 100 && rect.bottom >= 100) {
          this.activeSection = section.id
        }
      })
    }
  }
}

实现嵌套目录结构

对于复杂的文档结构，可以实现多级嵌套目录。

<template>
  <ul>
    <li v-for="item in toc" :key="item.id">
      <a :href="`#${item.id}`">{{ item.text }}</a>
      <toc-item v-if="item.children" :toc="item.children" />
    </li>
  </ul>
</template>

添加目录搜索功能

为大型文档目录添加搜索功能，提升用户体验。

export default {
  data() {
    return {
      searchQuery: '',
      filteredTOC: []
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredTOC = this.toc.filter(item => 
        item.text.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  }
}

以上方法提供了在Vue项目中实现目录功能的各种技术方案，可以根据具体需求选择适合的实现方式或组合使用多种方法。