当前位置：首页 > VUE

vue实现组件跟随

2026-01-08 05:30:31VUE

实现组件跟随的常见方法

使用CSS定位

通过CSS的position: fixed或position: absolute属性实现组件跟随。需要结合JavaScript计算目标元素的位置。

<template>
  <div ref="target">目标元素</div>
  <div class="follower" :style="followerStyle">跟随组件</div>
</template>

<script>
export default {
  data() {
    return {
      followerStyle: {
        position: 'fixed',
        top: '0',
        left: '0'
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.updatePosition)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updatePosition)
  },
  methods: {
    updatePosition() {
      const targetRect = this.$refs.target.getBoundingClientRect()
      this.followerStyle = {
        position: 'fixed',
        top: `${targetRect.top}px`,
        left: `${targetRect.right + 10}px`
      }
    }
  }
}
</script>

使用Vue指令

创建自定义指令处理跟随逻辑，提高代码复用性。

<template>
  <div v-follow="options">跟随内容</div>
</template>

<script>
export default {
  directives: {
    follow: {
      bind(el, binding) {
        const options = binding.value
        const target = document.querySelector(options.target)

        function updatePosition() {
          const targetRect = target.getBoundingClientRect()
          Object.assign(el.style, {
            position: 'fixed',
            top: `${targetRect.top}px`,
            left: `${targetRect.right + options.offset || 10}px`
          })
        }

        window.addEventListener('scroll', updatePosition)
        updatePosition()

        el._followCleanup = () => {
          window.removeEventListener('scroll', updatePosition)
        }
      },
      unbind(el) {
        el._followCleanup()
      }
    }
  },
  data() {
    return {
      options: {
        target: '#target-element',
        offset: 20
      }
    }
  }
}
</script>

第三方库实现

使用popper.js等专业定位库处理复杂跟随场景。

<template>
  <div ref="target">目标元素</div>
  <div ref="follower">跟随组件</div>
</template>

<script>
import { createPopper } from '@popperjs/core'

export default {
  mounted() {
    this.popperInstance = createPopper(
      this.$refs.target,
      this.$refs.follower,
      {
        placement: 'right',
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 10]
            }
          }
        ]
      }
    )
  },
  beforeDestroy() {
    this.popperInstance.destroy()
  }
}
</script>

响应式跟随

结合Vue的响应式特性，在目标位置变化时自动更新跟随位置。

<template>
  <div ref="target" :style="targetStyle">可移动目标</div>
  <div class="follower" :style="followerStyle">跟随组件</div>
</template>

<script>
export default {
  data() {
    return {
      targetStyle: {
        position: 'absolute',
        top: '100px',
        left: '100px'
      },
      followerStyle: {}
    }
  },
  mounted() {
    this.updateFollowerPosition()
    // 模拟目标移动
    setInterval(() => {
      this.targetStyle.left = `${Math.random() * window.innerWidth}px`
      this.targetStyle.top = `${Math.random() * window.innerHeight}px`
    }, 1000)
  },
  watch: {
    targetStyle: {
      deep: true,
      handler() {
        this.updateFollowerPosition()
      }
    }
  },
  methods: {
    updateFollowerPosition() {
      const targetRect = this.$refs.target.getBoundingClientRect()
      this.followerStyle = {
        position: 'fixed',
        top: `${targetRect.top}px`,
        left: `${targetRect.right + 10}px`
      }
    }
  }
}
</script>