ion-popover 在 ion-modal 上的位置

Question

我正在尝试在已打开的模式中显示信息弹出框。但是，弹出窗口不会显示在正确的位置。即使将事件传递给 popoverController，位置也不正确。

是否可以在信息按钮下方显示弹出窗口？

模式中的代码，我称之为弹出窗口的地方：

const popoverElement = Object.assign(document.createElement('ion-popover'), {
      component: 'info-popover',
      event: event,      
    });

document.body.appendChild(popoverElement);
return await popoverElement.present();

上面的 Popover 截图：

编辑

这就是 DOM 的样子。如您所见，模态附加到 body > app-root > ion-app。弹出窗口仅附加到 body

编辑 2

关闭模板中的阴影 DOM 可以解决这个问题，但我不想这样做。

@Component({
  tag: "component",
  styleUrl: "component.css",
  shadow: false
})

Answer 1

问题似乎是点击事件的 target 属性是隐藏的父级，而不是被点击的项目本身，所以它 sets the wrong popover position.

由于您手动传递事件，解决方法是手动设置 target。但是因为它是只读字段，所以您需要使用 Object.defineProperty（替换 theClickedElement）：

Object.defineProperty(event, 'target', {value: theClickedElement})

const popoverElement = Object.assign(document.createElement('ion-popover'), {
  component: 'info-popover',
  event: event,      
});

ion-popover 在 ion-modal 上的位置

position of ion-popover over ion-modal

typescript

ionic-framework

stenciljs