Ionic 5 弹出框位置

Posted 2023-03-04

【中文标题】Ionic 5 弹出框位置

【英文标题】：Ionic 5 Popover Position

【发布时间】：2020-10-10 14:23:51

【问题描述】：

我正在使用ion-popover。

在文档中的示例中，当您单击右上角的三个点时，弹出框会显示在单击的按钮旁边。

什么是重现这个的好方法？有内置的方法吗？

由于我没有找到方法，我正在尝试手动设置弹出框的样式，但这也不起作用。

我的page.ts

const popover = await this.popoverController.create(
  component: OptionsComponent,
  cssClass: 'my-custom-class',
  event: ev
);
return await popover.present();

我的global.scss

.my-custom-class .popover-content 
  position: absolute;
  right: 0;
  top: 0;

我做错了吗？有没有更好的方法来解决这个问题？

【参考方案1】：

解释了in the docs（强调我的）：

要呈现弹出框，请在弹出框实例上调用 present 方法。为了相对于被点击的元素定位弹出框，需要将点击事件传递到当前方法的选项中。

html

<div (click)="showPopover($event)">
    <div>AAA</div>
</div>

在您的类中，将事件作为参数传递给您的方法：

showPopover(event) 
    const popover = await this.popoverController.create(
      event,
      component: OptionsComponent,
      cssClass: 'my-custom-class', // optional
    );
    return await popover.present();

除非您想设置模态内容的样式，否则不需要额外的 CSS。

【讨论】：

好的，谢谢！我不知道我是怎么错过的。但它仍然无法正常工作。让我用 html 部分更新问题

我一定是出了什么问题，因为我再次检查它确实有效。谢谢！

文档让我很困惑。这些选项专门用于“当前”方法？ 'Present' 方法在没有传递任何选项的情况下被调用。它被传递给 CREATE 方法，而不是 'Present'？

@ProxyTech 是的，我在网上找不到 PopoverController 的文档...

你有没有像这里一样使用'$event'：showPopover($event)？没有'$'它对我不起作用？