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

fix(vue): correctly switch tabs after going back (#22309)

Browse Source 
resolves #22307
This commit is contained in:
Liam DeBeasi
2020-11-04 12:50:31 -05:00
committed by GitHub
parent a9b2260100
commit daf6a92127
6 changed files with 188 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/vue/src/components/IonTabButton.ts
View File

@ -2,35 +2,61 @@ import { h, defineComponent, inject } from 'vue';
export const IonTabButton = defineComponent({
name: 'IonTabButton',
setup(_, { attrs, slots }) {
props: {
_getTabState: { type: Function, default: () => { return {} } },
disabled: Boolean,
download: String,
href: String,
rel: String,
layout: String,
selected: Boolean,
tab: String,
target: String
},
setup(props, { slots }) {
const ionRouter: any = inject('navManager');
const onClick = (ev: Event) => {
if (ev.cancelable) {
ev.preventDefault();
}
const { tab, href } = attrs;
const currentRoute = ionRouter.getCurrentRouteInfo();
/**
* Keeping track of the originalHref
* (i.e. /tabs/tab1) lets us redirect
* users back to a child page using currentHref
* (i.e. /tabs/tab1/child).
*/
const { tab, href, _getTabState } = props;
const tabState = _getTabState();
const tappedTab = tabState.tabs[tab] || {};
const originalHref = tappedTab.originalHref || href;
const currentHref = tappedTab.currentHref || href;
const prevActiveTab = tabState.activeTab;
if (currentRoute.tab === tab) {
if (href !== currentRoute.pathname) {
ionRouter.resetTab(tab, href);
/**
* If we are still on the same
* tab as before, but the base href
* does not equal the current href,
* then we must be on a child page and
* should direct users back to the root
* of the tab.
*/
if (prevActiveTab === tab) {
if (originalHref !== currentHref) {
ionRouter.resetTab(tab, originalHref);
}
} else {
// TODO tabs will change/did change
ionRouter.changeTab(tab, href)
ionRouter.changeTab(tab, currentHref)
}
}
};
return () => {
const children = slots.default && slots.default()
return h(
'ion-tab-button',
{
onClick,
...attrs
...props
},
children
slots.default && slots.default()
)
}
}