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

fix(vue): pushing a non-tabs page inside of tabs no longer renders it inside of the tabs outlet (#22112)

Browse Source 
resolves #22066
This commit is contained in:
Liam DeBeasi
2020-09-22 11:55:22 -04:00
committed by GitHub
parent 9ca8b9de46
commit 6ac6810148
3 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import {
ref, ref,
computed, computed,
inject, inject,
provide,
watch, watch,
shallowRef, shallowRef,
InjectionKey InjectionKey
@ -15,19 +16,16 @@ import { fireLifecycle, generateId, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LI
let viewDepthKey: InjectionKey<0> = Symbol(0); let viewDepthKey: InjectionKey<0> = Symbol(0);
export const IonRouterOutlet = defineComponent({ export const IonRouterOutlet = defineComponent({
name: 'IonRouterOutlet', name: 'IonRouterOutlet',
setup(_, { attrs }) { setup() {
const vueRouter = useRouter(); const vueRouter = useRouter();
const route = useRoute(); const route = useRoute();
const depth = inject(viewDepthKey, 0); const depth = inject(viewDepthKey, 0);
// TODO types // TODO types
const matchedRouteRef: any = computed(() => { const matchedRouteRef: any = computed(() => route.matched[depth]);
if (attrs.tabs) {
return route.matched[route.matched.length - 1]; provide(viewDepthKey, depth + 1)
}
return route.matched[depth];
});
const ionRouterOutlet = ref(); const ionRouterOutlet = ref();
const id = generateId('ion-router-outlet'); const id = generateId('ion-router-outlet');
@ -207,8 +205,6 @@ export const IonRouterOutlet = defineComponent({
} }
const currentRoute = ionRouter.getCurrentRouteInfo(); const currentRoute = ionRouter.getCurrentRouteInfo();
if (currentRoute.tab !== undefined && !attrs.tabs) return
let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id); let enteringViewItem = viewStacks.findViewItemByRouteInfo(currentRoute, id);
if (!enteringViewItem) { if (!enteringViewItem) {

5
packages/vue/src/components/IonTabs.ts
View File

@ -20,8 +20,7 @@ export const IonTabs = defineComponent({
'height': '100%', 'height': '100%',
'contain': 'layout size style', 'contain': 'layout size style',
'z-index': '0' 'z-index': '0'
}, }
ref: 'ionTabsRef'
}, },
[ [
h( h(
@ -35,7 +34,7 @@ export const IonTabs = defineComponent({
} }
}, },
[ [
h(IonRouterOutlet, { tabs: true }) h(IonRouterOutlet)
] ]
), ),
...slots.default && slots.default() ...slots.default && slots.default()

1
packages/vue/src/proxies.ts
View File

@ -817,6 +817,7 @@ export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', [
export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', [ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', [
'fireFocusEvents',
'color', 'color',
'autocapitalize', 'autocapitalize',
'autofocus', 'autofocus',