vue实现标题导航

实现标题导航的基本思路

在Vue中实现标题导航功能，通常需要监听页面滚动事件，动态计算当前可视区域内的标题位置，并高亮对应的导航项。以下是具体实现方法：

使用IntersectionObserver API

IntersectionObserver是现代浏览器提供的API，可以高效监听元素是否进入视口。

// 在组件中
data() {
  return {
    activeId: '',
    observer: null
  }
},
mounted() {
  this.observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.activeId = entry.target.id
      }
    })
  }, {
    threshold: 0.5,
    rootMargin: '0px 0px -50% 0px'
  })

  document.querySelectorAll('h2, h3').forEach(section => {
    if (section.id) {
      this.observer.observe(section)
    }
  })
},
beforeDestroy() {
  this.observer.disconnect()
}

基于滚动事件的实现

对于需要兼容旧浏览器的场景，可以使用传统滚动事件监听：

data() {
  return {
    headings: [],
    activeId: ''
  }
},
mounted() {
  this.headings = Array.from(document.querySelectorAll('h2, h3'))
    .filter(el => el.id)
    .map(el => ({
      id: el.id,
      top: el.getBoundingClientRect().top + window.scrollY
    }))

  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollPosition = window.scrollY + 100

    for (let i = this.headings.length - 1; i >= 0; i--) {
      if (scrollPosition >= this.headings[i].top) {
        this.activeId = this.headings[i].id
        break
      }
    }
  }
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

导航菜单实现

在模板中渲染导航菜单并绑定点击事件：

<template>
  <div class="toc-container">
    <ul>
      <li v-for="heading in headings" :key="heading.id">
        <a 
          :href="`#${heading.id}`"
          :class="{ active: activeId === heading.id }"
          @click.prevent="scrollTo(heading.id)"
        >
          {{ heading.text }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTo(id) {
      const element = document.getElementById(id)
      if (element) {
        window.scrollTo({
          top: element.offsetTop,
          behavior: 'smooth'
        })
      }
    }
  }
}
</script>

自动生成标题结构

对于动态内容，可以提取DOM中的标题自动生成导航：

computed: {
  tocItems() {
    const items = []
    const headers = document.querySelectorAll('h2, h3')

    headers.forEach(header => {
      if (header.id) {
        items.push({
          id: header.id,
          text: header.innerText,
          level: parseInt(header.tagName.substring(1))
        })
      }
    })

    return items
  }
}

样式优化

为导航菜单添加基本样式：

.toc-container {
  position: fixed;
  right: 20px;
  top: 100px;
  max-width: 250px;
}

.toc-container ul {
  list-style: none;
  padding: 0;
}

.toc-container li a {
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  border-left: 2px solid transparent;
}

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

.toc-container li a:hover {
  color: #42b983;
}

使用第三方库

对于复杂需求，可以考虑使用专门库如vue-scrollactive：

import VueScrollactive from 'vue-scrollactive'

Vue.use(VueScrollactive)

// 模板中使用
<scrollactive>
  <a href="#section1" class="scrollactive-item">Section 1</a>
  <a href="#section2" class="scrollactive-item">Section 2</a>
</scrollactive>

以上方法可以根据项目需求选择或组合使用，实现灵活高效的标题导航功能。