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

fix(vue): adding class to IonPage no longer hides component (#25490)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-06-21 12:42:50 -04:00
committed by GitHub
parent 7821df2f5e
commit cbaa9711f0
3 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,21 +3,18 @@ import { h, defineComponent } from 'vue';
export const IonPage = /*@__PURE__*/ defineComponent({
name: 'IonPage',
props: {
isInOutlet: { type: Boolean, default: false },
registerIonPage: { type: Function, default: () => {} }
},
mounted() {
this.$props.registerIonPage(this.$refs.ionPage);
},
setup(props, { attrs, slots }) {
const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
setup(_, { attrs, slots }) {
return () => {
const existingClasses = attrs.class ?? '';
return h(
'div',
{
...attrs,
['class']: `ion-page ${hidePageClass} ${existingClasses}`,
['class']: 'ion-page',
ref: 'ionPage'
},
slots.default && slots.default()

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

@ -427,6 +427,11 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
* as a result of a navigation change.
*/
if (viewItem.registerCallback) {
/**
* Page should be hidden initially
* to avoid flickering.
*/
ionPageEl.classList.add('ion-page-invisible');
viewItem.registerCallback();
/**
@ -461,7 +466,6 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
let props = {
ref: c.vueComponentRef,
key: c.pathname,
isInOutlet: true,
registerIonPage: (ionPageEl: HTMLElement) => registerIonPage(c, ionPageEl)
}