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

实现快速标签、页面滚动到对应位置以及页面活动标签动态高亮的功能可以通过Vue2的指令来实现。下面是具体的实现步骤：

1. 创建标签组件

首先创建一个标签组件，包含标签的名称和点击事件。如下所示：

<template>
  <div class="tag" @click="scrollTo">{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: String,
    id: String
  },
  methods: {
    scrollTo() {
      const el = document.getElementById(this.id)
      el.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

<style>
.tag {
  cursor: pointer;
}
</style>

2. 注册指令

在Vue实例中注册一个指令，该指令用于监听页面滚动事件，根据滚动位置动态设置当前活动标签的样式。如下所示：

Vue.directive('scroll', {
  inserted: function(el, binding) {
    let f = function(evt) {
      if (binding.value(evt, el)) {
        el.removeEventListener('scroll', f)
      }
    }
    el.addEventListener('scroll', f)
  }
})

3. 使用标签组件

在页面中使用标签组件，需要给每个标签组件传递一个id，该id对应页面中的锚点。如下所示：

<div class="tags">
  <tag v-for="(item, index) in tags" :key="index" :name="item" :id="`tag-${index}`" />
</div>

4. 实现指令逻辑

在标签组件的父组件中，使用v-scroll指令监听页面滚动事件，并根据滚动位置动态设置当前活动标签的样式。如下所示：

<template>
  <div>
    <div class="tags">
      <tag v-for="(item, index) in tags" :key="index" :name="item" :id="`tag-${index}`" />
    </div>
    <div class="contents" v-scroll="onScroll">
      <div class="content" v-for="(item, index) in contents" :key="index" :id="`tag-${index}`">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5'],
      contents: ['Content1', 'Content2', 'Content3', 'Content4', 'Content5'],
      activeIndex: 0
    }
  },
  methods: {
    onScroll(evt, el) {
      let scrollTop = evt.target.scrollTop
      let offsetTop = el.offsetTop
      let height = el.offsetHeight
      if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
        this.activeIndex = el.getAttribute('id').split('-')[1]
      }
    }
  }
}
</script>

<style>
.tags {
  position: fixed;
  top: 100px;
}

.tag.active {
  color: red;
}

.contents {
  margin-top: 200px;
  height: 400px;
  overflow-y: auto;
}

.content {
  height: 500px;
  margin-bottom: 50px;
}
</style>

在onScroll方法中，根据滚动位置和标签组件的位置计算出当前活动的标签，然后将该标签的样式设置为active。如下所示：

<div class="tags">
  <tag v-for="(item, index) in tags" :key="index" :name="item" :id="`tag-${index}`" :class="{ active: activeIndex == index }" />
</div>

这样，就可以实现快速标签、页面滚动到对应位置以及页面活动标签动态高亮的功能了。