vue2 使用指令实现 点击标签滚动到页面相应位置，并且实现页面滚动对应标签高亮功能

可以通过使用Vue指令来实现点击标签滚动到页面相应位置，以及页面滚动对应标签高亮功能。以下是实现方法：

1. 点击标签滚动到页面相应位置

在标签上绑定一个点击事件，并通过`window.scrollTo()`方法实现滚动到相应位置。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="scrollToElement(index)">
        {{ item }}
      </li>
    </ul>
    <div v-for="(item, index) in list" :key="index" ref="element">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C', 'D']
    }
  },
  methods: {
    scrollToElement(index) {
      const element = this.$refs.element[index]
      window.scrollTo({
        top: element.offsetTop,
        behavior: 'smooth'
      })
    }
  }
}
</script>

2. 页面滚动对应标签高亮功能

监听浏览器的滚动事件，在滚动时判断当前滚动位置对应哪个标签，并设置该标签的高亮样式。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" @click="scrollToElement(index)" :class="{ 'active': activeIndex === index }">
        {{ item }}
      </li>
    </ul>
    <div v-for="(item, index) in list" :key="index" ref="element">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['A', 'B', 'C', 'D'],
      activeIndex: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    scrollToElement(index) {
      const element = this.$refs.element[index]
      window.scrollTo({
        top: element.offsetTop,
        behavior: 'smooth'
      })
    },
    handleScroll() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      for (let i = 0; i < this.list.length; i++) {
        const element = this.$refs.element[i]
        if (scrollTop >= element.offsetTop && scrollTop < element.offsetTop + element.offsetHeight) {
          this.activeIndex = i
          break
        }
      }
    }
  }
}
</script>

<style>
.active {
  color: red;
}
</style>