Vue组件问题：响应式表格中Dropdown menu如何挂载到body并设置transform(x,y)

1. 分离下拉菜单的DOM挂载目标 #

利用Vue的Teleport组件，直接把下拉菜单挂载到body节点下，脱离表格容器的限制。

示例代码：

<template>
  <div class="dropdown">
    <button 
      ref="toggleBtn"
      @click="toggleDropdown" 
      class="dropdown-toggle"
    >
      触发按钮
    </button>
    <!-- 通过Teleport挂载到body -->
    <Teleport to="body" v-if="isOpen">
      <div 
        class="dropdown-menu"
        :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
      >
        <slot></slot>
      </div>
    </Teleport>
  </div>
</template>

2. 计算菜单的定位偏移量 #

在组件内获取触发按钮的位置，动态计算菜单需要的transform偏移值，确保菜单和按钮对齐：

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const isOpen = ref(false);
    const position = ref({ x: 0, y: 0 });
    const toggleBtn = ref(null);

    const toggleDropdown = () => {
      isOpen.value = !isOpen.value;
      isOpen.value && calculatePosition();
    };

    const calculatePosition = () => {
      if (!toggleBtn.value) return;
      const btnRect = toggleBtn.value.getBoundingClientRect();
      // 基于视口位置 + 滚动偏移，确保滚动时菜单位置正确
      position.value = {
        x: btnRect.left + window.scrollX,
        y: btnRect.bottom + window.scrollY
      };
    };

    // 监听滚动，实时更新菜单位置
    const handleScroll = () => {
      isOpen.value && calculatePosition();
    };

    // 点击外部关闭菜单
    const handleOutsideClick = (e) => {
      if (toggleBtn.value && !toggleBtn.value.contains(e.target) && isOpen.value) {
        isOpen.value = false;
      }
    };

    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
      window.addEventListener('click', handleOutsideClick);
    });

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('click', handleOutsideClick);
    });

    return {
      isOpen,
      position,
      toggleDropdown,
      toggleBtn
    };
  }
};

3. 调整菜单的基础样式 #

给下拉菜单设置绝对定位，确保挂载到body后能正确脱离文档流：

.dropdown-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  min-width: 140px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

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