68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import { App } from '@capacitor/app'
|
|
import { Capacitor } from '@capacitor/core'
|
|
import { useBackButton } from '@ionic/vue'
|
|
import { tabRootPaths } from '../config'
|
|
|
|
useHead({
|
|
title: 'Cook Tabs',
|
|
})
|
|
|
|
const router = useRouter()
|
|
const ionRouter = useIonRouter()
|
|
|
|
function isTabRootPath(path: string) {
|
|
return tabRootPaths.includes(path)
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (Capacitor.getPlatform() === 'android') {
|
|
useBackButton(10, () => {
|
|
if (isTabRootPath(router.currentRoute.value.path)) {
|
|
App.minimizeApp()
|
|
}
|
|
else {
|
|
ionRouter.back()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-content>
|
|
<ion-tabs>
|
|
<ion-router-outlet />
|
|
|
|
<ion-tab-bar slot="bottom">
|
|
<ion-tab-button tab="home" href="/home">
|
|
<ion-icon :icon="ioniconsBookOutline" />
|
|
<ion-label>做菜</ion-label>
|
|
</ion-tab-button>
|
|
|
|
<IonTabButton tab="library" href="/library">
|
|
<ion-icon :icon="ioniconsLibraryOutline" />
|
|
<ion-label>菜谱</ion-label>
|
|
</IonTabButton>
|
|
|
|
<IonTabButton tab="apps" href="/apps">
|
|
<ion-icon :icon="ioniconsRestaurantOutline" />
|
|
<ion-label>发现</ion-label>
|
|
</IonTabButton>
|
|
|
|
<!-- <IonTabButton tab="tab3" href="/tabs/tab3">
|
|
<ion-icon :icon="ioniconsBulbOutline" />
|
|
<ion-label>Tab 3</ion-label>
|
|
</IonTabButton> -->
|
|
|
|
<IonTabButton tab="my" href="/my">
|
|
<ion-icon :icon="ioniconsPersonCircleOutline" />
|
|
<ion-label>我的</ion-label>
|
|
</IonTabButton>
|
|
</ion-tab-bar>
|
|
</ion-tabs>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|