vue实现滚动监听到锚点

要实现滚动监听到锚点，可以使用Vue的指令和一些JavaScript代码。

首先，我们可以使用Vue的指令来绑定滚动事件。在模板中，我们可以这样使用指令：

<div v-scroll="handleScroll">
  <!-- content -->
</div>

然后，在Vue实例中，我们需要定义handleScroll方法来处理滚动事件。在这个方法中，我们可以使用JavaScript来获取到当前滚动的位置，再根据锚点的位置来判断是否需要触发滚动监听事件。代码如下：

methods: {
  handleScroll() {
    const anchors = document.querySelectorAll('a[id]')
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

    for (let i = 0; i < anchors.length; i++) {
      const anchor = anchors[i]
      const offsetTop = anchor.getBoundingClientRect().top + scrollTop

      if (offsetTop <= scrollTop + 100) {
        // 触发滚动监听事件
        this.$emit('scroll', anchor.getAttribute('id'))
      }
    }
  }
}

在这个方法中，我们首先使用document.querySelectorAll方法获取到所有带有id属性的锚点。然后，使用window.pageYOffset、document.documentElement.scrollTop和document.body.scrollTop来获取到当前的滚动位置。接着，遍历所有锚点，使用getBoundingClientRect方法获取到锚点相对于视口的位置，再加上scrollTop，就可以获取到锚点相对于文档的位置。如果当前滚动位置加上一个偏移量（这里是100）大于等于锚点的位置，就触发滚动监听事件。

最后，我们可以在父组件中监听scroll事件，来处理滚动到特定锚点的逻辑。代码如下：

<template>
  <div>
    <div v-scroll="handleScroll">
      <!-- content -->
    </div>
    <div v-for="anchor in anchors" :key="anchor">
      <a :href="'#' + anchor">{{ anchor }}</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      anchors: ['anchor1', 'anchor2', 'anchor3']
    }
  },
  methods: {
    handleScroll(anchor) {
      console.log('scroll to', anchor)
    }
  }
}
</script>

在这个例子中，我们在父组件中定义了一个anchors数组，它包含了所有锚点的id。然后，在模板中，我们使用v-for指令来生成所有锚点的链接。当触发scroll事件时，我们可以获取到当前滚动到的锚点的id，并且在控制台输出它的值。