6

我正在使用ion-popover。

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

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

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

我的页面.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;
}

难道我做错了什么？有没有更好的方法来解决这个问题？

4

1 回答 1

22

它在文档中进行了解释（强调我的）：

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

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。

于 2020-06-20T12:19:27.457 回答