PrimeVue OverlayPanel在Shadow DOM中定位错误，求坐标计算干预方法

问题 #

在Shadow DOM环境下使用PrimeVue的OverlayPanel组件时，通过append-to属性将其挂载到Shadow DOM内的DIV（#overlay-mount-point），但组件始终基于浏览器窗口的top/left坐标计算绝对位置，而非触发按钮的坐标，导致位置完全错误。相关代码如下：

<Button id="btn-op-toggle" @click="toggleOverlay" icon="pi pi-map-marker" />
<div id="overlay-mount-point"></div>

<OverlayPanel v-if="this.overlayMountingDiv !== null" :append-to="this.overlayMountingDiv" ref="locOverlay" @hide="overlayClosed">
  <!-- 内容区域 -->
</OverlayPanel>

已尝试方案 #

• 通过PassThrough和JavaScript直接覆盖组件的top/left坐标，但PrimeVue内部会错误重置这些值；
• 将div#overlay-mount-point设为相对定位，无效果（坐标并非基于最近相对父元素计算）；
• 使用locOverlay.toggle(event, target)的第二个参数，未解决问题。

需求：是否有办法干预OverlayPanel的坐标计算逻辑，比如通过回调函数等方式？

解决方案 #

1. 通过PassThrough重写定位逻辑
   利用PrimeVue的pt配置，覆盖组件根元素的渲染逻辑，自定义坐标计算：

   // 在组件的setup或data中定义PassThrough配置
   const overlayPt = {
     root: (options) => {
       const target = options.props.target;
       const mountPoint = document.getElementById('overlay-mount-point');
       
       // 计算相对于挂载点的坐标
       const targetRect = target.getBoundingClientRect();
       const mountRect = mountPoint.getBoundingClientRect();
       
       const top = targetRect.top - mountRect.top + targetRect.height;
       const left = targetRect.left - mountRect.left;
       
       return {
         style: {
           position: 'absolute',
           top: `${top}px`,
           left: `${left}px`,
           ...options.style // 保留组件默认样式
         }
       };
     }
   };
   

   绑定到OverlayPanel组件：

   <OverlayPanel :pt="overlayPt" :append-to="overlayMountingDiv" ref="locOverlay" @hide="overlayClosed">
     <!-- 内容 -->
   </OverlayPanel>
   

2. 手动强制设置位置
   放弃组件自带定位，在触发方法中手动计算坐标并锁定样式：

   const toggleOverlay = (event) => {
     const locOverlay = ref.value;
     const target = event.currentTarget;
     const mountPoint = document.getElementById('overlay-mount-point');
     
     const targetRect = target.getBoundingClientRect();
     const mountRect = mountPoint.getBoundingClientRect();
     const top = targetRect.top - mountRect.top + targetRect.height;
     const left = targetRect.left - mountRect.left;
     
     locOverlay.toggle(event);
     // 延迟执行确保组件已渲染
     setTimeout(() => {
       const overlayEl = locOverlay.$el;
       overlayEl.style.position = 'absolute';
       overlayEl.style.top = `${top}px`;
       overlayEl.style.left = `${left}px`;
       // 锁定top/left避免组件重置
       Object.defineProperty(overlayEl.style, 'top', { writable: false });
       Object.defineProperty(overlayEl.style, 'left', { writable: false });
     }, 0);
   };
   

   注意：需要在overlayClosed事件中恢复样式可写性，避免影响下次显示：

   const overlayClosed = () => {
     const overlayEl = ref.value?.$el;
     if (overlayEl) {
       Object.defineProperty(overlayEl.style, 'top', { writable: true });
       Object.defineProperty(overlayEl.style, 'left', { writable: true });
     }
   };
   

3. 自定义position定位函数（部分版本支持）
   若使用的PrimeVue版本支持position属性传入自定义函数，可直接替换定位逻辑：

   const customPosition = (element, target) => {
     const mountPoint = document.getElementById('overlay-mount-point');
     const targetRect = target.getBoundingClientRect();
     const mountRect = mountPoint.getBoundingClientRect();
     
     return {
       top: `${targetRect.top - mountRect.top + targetRect.height}px`,
       left: `${targetRect.left - mountRect.left}px`
     };
   };
   

   绑定到组件：

   <OverlayPanel :position="customPosition" :append-to="overlayMountingDiv" ref="locOverlay" @hide="overlayClosed">
     <!-- 内容 -->
   </OverlayPanel>
   

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