离子弹在离子模态上的位置

迈克·曼德斯

我正在尝试在已打开的模式中显示信息弹出窗口。但是，弹出窗口不会显示在正确的位置。即使将事件传递给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
})

汤玛士

The problem seems to be that the target property of the click event is the shadowed parent, not the clicked item itself so it sets the wrong popover position.

Since you manually pass the event, a workaround would be to manually set the target. But because it's a read only field you need to do this with Object.defineProperty (replace theClickedElement):

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。