ionic-team / ionic-team/ionic-framework
bug: modal should not add another ion-page class if one is already provided by the user
- 主要语言
- 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:
```
Hello World
```
Instead, it should have this markup:
```
Hello World
```
贡献指南
调研方向
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