在 actionSheetController 中添加自定义内容

Question

有没有办法在 ionic.actionSheetController 中使用自定义内容而不是按钮列表？ ionic.modalController 中的一个示例，我可以使用自定义 component 作为模态内容。

ionic.modalController 示例

import { ProductDetails } from "./../components";

...

return this.$ionic.modalController
  .create({
    component: ProductDetails,
    componentProps: {
      propsData: {
        data: item,
      }
    }
  })
  .then(m => m.present());

ionic.actionSheetController尝试

import { ProductDetails } from "./../components";

...

return this.$ionic.actionSheetController
  .create({
    header: item.title,
    subHeader: item.subTitle,
    component: ProductDetails,
    buttons: [
      {
        text: "Cancel",
        icon: "close",
        role: "cancel"
      }
    ]
  })
  .then(a => a.present());

下图是我想要实现的目标

Answer 1

Action Sheet Ionic component only accepts buttons, in contrast to the Popover and Modal 个组件，每个组件接受自定义组件。

接近您想要的行为类型的最佳选择可能是使用 Ionic 提供的 Popover component, adding a custom enterAnimation and leaveAnimation and setting the width properties。

过去（Ionic 4 之前），可以抓取 DOM 元素并随意更改，但使用新的底层 Web 组件，这是不可能的。要获得更多自定义行为，您需要查看 StencilJS 或类似内容来创建新组件。这是一种可维护性风险，考虑到 Ionic 中内置的大量功能，这可能没有必要。

在 actionSheetController 中添加自定义内容

Adding custom content in actionSheetController

ionic-framework

ionic4

ionic-vue