javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): do not hide page content when using ion-page in non-routing contexts (#22302)

Browse Source 
resolves #22300
This commit is contained in:
Liam DeBeasi
2020-10-13 10:29:37 -04:00
committed by GitHub
parent 6026c65b1a
commit fff82d0bdc
3 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vue/src/components/IonPage.ts
View File

@ -2,12 +2,16 @@ import { h, defineComponent } from 'vue';
export const IonPage = defineComponent({ export const IonPage = defineComponent({
name: 'IonPage', name: 'IonPage',
setup(_, { attrs, slots }) { props: {
isInOutlet: { type: Boolean, default: false }
},
setup(props, { attrs, slots }) {
return () => { return () => {
const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
return h( return h(
'div', 'div',
{ {
['class']: 'ion-page ion-page-invisible', ['class']: `ion-page ${hidePageClass}`,
...attrs, ...attrs,
ref: 'ionPage' ref: 'ionPage'
}, },

2
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -301,7 +301,7 @@ export const IonRouterOutlet = defineComponent({
'ion-router-outlet', 'ion-router-outlet',
{ ref: 'ionRouterOutlet' }, { ref: 'ionRouterOutlet' },
// TODO types // TODO types
components && components.map((c: any) => h(c.vueComponent, { key: c.pathname })) components && components.map((c: any) => h(c.vueComponent, { key: c.pathname, isInOutlet: true }))
) )
} }
}); });

26
packages/vue/test-app/src/components/ModalContent.vue
View File

@ -1,19 +1,22 @@
<template> <template>
<ion-header> <ion-page>
<ion-toolbar> <ion-header>
<ion-buttons> <ion-toolbar>
<ion-button @click="dismiss">Dismiss</ion-button> <ion-buttons>
</ion-buttons> <ion-button @click="dismiss">Dismiss</ion-button>
<ion-title>Modal</ion-title> </ion-buttons>
</ion-toolbar> <ion-title>Modal</ion-title>
</ion-header> </ion-toolbar>
<ion-content class="ion-padding"> </ion-header>
{{ title }} <ion-content class="ion-padding">
</ion-content> {{ title }}
</ion-content>
</ion-page>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import {
IonPage,
IonButton, IonButton,
IonButtons, IonButtons,
IonContent, IonContent,
@ -30,6 +33,7 @@ export default defineComponent({
title: { type: String, default: 'Default Title' } title: { type: String, default: 'Default Title' }
}, },
components: { components: {
IonPage,
IonButton, IonButton,
IonButtons, IonButtons,
IonContent, IonContent,