vue2 项目，有一个项目详情页，详情页内由上到下有5个部分进行排列，要求使用自定义指令v-scroll并结合封装一个固定于右侧竖向排列的快速定位标签，实现点击标签页面滚动到相应的模块，并且页面上下滚动时候标签会联动高亮的功能，请告诉我实现这个功能的逻辑及代码

好的，我可以为您介绍实现这个功能的逻辑和代码。

首先，我们需要创建一个自定义指令 `v-scroll`，并且在页面中使用该指令来绑定需要滚动到的模块。指令的实现如下：

Vue.directive('scroll', {
  inserted: function(el, binding) {
    el.addEventListener('click', function() {
      let target = document.getElementById(binding.value)
      let offsetTop = target.offsetTop
      window.scrollTo({
        top: offsetTop,
        behavior: "smooth"
      })
    })
  }
})

然后，我们需要在页面中添加固定于右侧的竖向排列的快速定位标签，并且使用 `v-scroll` 指令来绑定需要滚动到的模块。代码如下：

<template>
  <div>
    <ul>
      <li v-scroll="'part1'">Part 1</li>
      <li v-scroll="'part2'">Part 2</li>
      <li v-scroll="'part3'">Part 3</li>
      <li v-scroll="'part4'">Part 4</li>
      <li v-scroll="'part5'">Part 5</li>
    </ul>
  </div>
</template>

<style>
  ul {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    list-style: none;
  }
  li {
    cursor: pointer;
    margin-bottom: 20px;
  }
  li.active {
    color: red;
  }
</style>

最后，我们需要实现标签联动高亮的功能。我们可以使用 `window` 对象的 `scroll` 事件来监听页面滚动，然后根据当前滚动位置来判断哪个模块应该被高亮。代码如下：

<script>
  export default {
    data() {
      return {
        activePart: 'part1'
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll() {
        let scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop
        let part1 = document.getElementById('part1').offsetTop
        let part2 = document.getElementById('part2').offsetTop
        let part3 = document.getElementById('part3').offsetTop
        let part4 = document.getElementById('part4').offsetTop
        let part5 = document.getElementById('part5').offsetTop
        if (scrollTop >= part1 && scrollTop < part2) {
          this.activePart = 'part1'
        } else if (scrollTop >= part2 && scrollTop < part3) {
          this.activePart = 'part2'
        } else if (scrollTop >= part3 && scrollTop < part4) {
          this.activePart = 'part3'
        } else if (scrollTop >= part4 && scrollTop < part5) {
          this.activePart = 'part4'
        } else {
          this.activePart = 'part5'
        }
      }
    }
  }
</script>

以上就是实现这个功能的逻辑和代码。希望对您有所帮助。