ionic-team / ionic-team/ionic-framework

bug: modal should not add another ion-page class if one is already provided by the user

未关闭
#23,304 9 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

# Feature Request

**Ionic version:**

[x] **5.x**

**Describe the Feature Request**
When using modalController and passing a custom component, the ion-modal that the modalController creates automatically has an ion-page element inside of it. If the custom component uses ion-page as its root element, there are two ion-page elements inside of the modal.

This default behavior is bad for a couple of reasons:
1. Vue components that are used inside of modals may end up being reused as regular content pages. There are plenty of cases where this happens in our app. So either we leave `` as the parent in these components and you end up having two `` elements embedded when the component is used as a modal, or we write some hacky logic to determine whether or not the component has been placed inside of a modal and remove the ion-page parent when so.
2. Not all use cases of ion-modal will see ion-page as the root parent inside the modal. For example, you may need routing inside of a modal in which case ion-nav should be the immediate child of the ion-modal and ion-page will be inside of the ion-nav.

**Describe Preferred Solution**
Either remove the ion-page automatically generated inside of ion-modal completely and let the custom component decide when and where to place the page, or only add ion-page if the root element of the custom component isn't already an ion-page or ion-nav.

**Reproduction**
https://github.com/Giwayume/ion-vue-modal-page-bug

**Related Code**

some-component.vue
```


Hello World

```

modal-creator.ts
```
import { defineAsyncComponent } from 'vue';
import { modalController } from '@ionic/vue';
const modal = await modalController.create({
component: defineAsyncComponent(() => import('./some-component.vue'))
});
```

When this modal is created, it will have this markup:
```


```

Instead, it should have this markup:
```


```

贡献指南

打开贡献指南

调研方向

Start with the reproduction repository and the modal-creator.ts and some-component.vue examples to verify the duplicate ion-page structure. Trace Ionic Vue's modal rendering and determine whether the generated page should be omitted for an ion-page or ion-nav root; done means the modal matches the requested single-page markup without breaking other modal uses.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。