Vue.js实现点击链接后将绝对定位Div置于其下方的方法

嘿，我来帮你搞定这个需求！在Vue里不用像原生JS那样靠ID查找元素，借助事件对象就能直接拿到点击的链接元素，进而精准定位那个绝对Div，具体步骤如下：

步骤1：修改点击事件，传递事件对象 #

先把你原有的点击事件改成传递$event参数，这样就能获取到触发点击的链接元素：

<a class="block" href="#" @click="toggleNavigation(item, $event)" v-for="item in skills" :key="item.id">{{item.name}}</a>

步骤2：在方法中获取元素位置并计算Div定位 #

在Vue的methods里定义toggleNavigation方法，通过事件对象拿到链接元素后，用getBoundingClientRect()获取它的位置和尺寸信息，再结合页面滚动距离修正定位，避免滚动后偏移：

<script>
export default {
  data() {
    return {
      skills: [/* 你的skills数组数据 */],
      divPosition: {
        top: 0,
        left: 0
      }
    }
  },
  methods: {
    toggleNavigation(item, event) {
      // 确保拿到绑定事件的<a>标签（如果链接有子元素，用currentTarget更稳妥）
      const linkEl = event.currentTarget;
      // 获取元素相对于视口的位置信息
      const rect = linkEl.getBoundingClientRect();
      // 计算Div的最终定位：元素底部位置 + 页面滚动距离
      this.divPosition = {
        top: `${rect.bottom + window.scrollY}px`,
        left: `${rect.left + window.scrollX}px`
      };
      // 这里可以继续处理你原本和item相关的逻辑
    }
  }
}
</script>

步骤3：绑定Div的定位样式 #

把绝对Div的top和left绑定到我们计算好的divPosition上：

<div :style="{ position: 'absolute', width: '300px', top: divPosition.top, left: divPosition.left }">some text </div>

小提示 #

• 用event.currentTarget代替event.target的原因是：如果你的<a>标签里还有其他子元素（比如图标），event.target可能会指向子元素，而currentTarget始终指向绑定了点击事件的<a>标签，定位更准确。
• getBoundingClientRect()返回的是元素相对于浏览器视口的位置，加上window.scrollY和window.scrollX可以修正页面滚动带来的偏移，保证Div始终在链接正下方。

内容的提问来源于stack exchange，提问作者user7646471