ion-popover 在 ion-modal 上的位置答案

【问题标题】：position of ion-popover over ion-modalion-popover 在 ion-modal 上的位置
【发布时间】：2019-10-31 23:06:21
【问题描述】：

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

关闭 stencil 中的 shadow DOM 可以解决这个问题，但我不希望这样做。

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

【问题讨论】：

我最近遇到了类似的问题。你能检查一下ion-modal 和ion-popover 附加到DOM 的位置吗？它们都应该是ion-app 的直接子代。
ion-modal 附加到 body > app-root > ion-app，而 ion-popover 附加到 body

标签： typescript ionic-framework stenciljs

【解决方案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,      
});

【讨论】：