mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 07:03:01 +08:00
105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<template>
|
|
<van-nav-bar
|
|
:title="$t($route.meta.title)"
|
|
:left-arrow="!tabbarVisible"
|
|
@click-left="goBack"
|
|
/>
|
|
<div class="main-page" :class="{ tabbar: tabbarVisible, border: showBorder }">
|
|
<RouterView v-slot="{ Component }" v-if="$route.meta.keepAlive">
|
|
<keep-alive>
|
|
<component :is="Component" :key="$route.path" />
|
|
</keep-alive>
|
|
</RouterView>
|
|
<RouterView v-if="!$route.meta.keepAlive" :key="$route.path" />
|
|
</div>
|
|
<nut-tabbar
|
|
unactive-color="#364636"
|
|
active-color="#1989fa"
|
|
bottom
|
|
v-model="activeTab"
|
|
v-show="tabbarVisible"
|
|
@tab-switch="tabSwitch"
|
|
>
|
|
<nut-tabbar-item
|
|
v-for="item in tabItem"
|
|
:key="item.key"
|
|
:tab-title="$t(`tabbar.${item.key}`)"
|
|
:icon="item.icon"
|
|
/>
|
|
</nut-tabbar>
|
|
</template>
|
|
|
|
<script setup name="BasicLayoutPage">
|
|
import { useRouter } from "vue-router";
|
|
import { Home, Horizontal, My, Location } from "@nutui/icons-vue";
|
|
const tabItem = [
|
|
{ key: "home", icon: Home },
|
|
{ key: "list", icon: Horizontal },
|
|
{ key: "member", icon: My },
|
|
{ key: "demo", icon: Location },
|
|
];
|
|
const router = useRouter();
|
|
const activeTab = ref(0);
|
|
const tabbarVisible = ref(true);
|
|
const showBorder = ref(true);
|
|
watch(
|
|
() => router,
|
|
() => {
|
|
console.log(
|
|
tabItem.findIndex(
|
|
(item) => item.key === router.currentRoute.value.path.replace("/", "")
|
|
)
|
|
);
|
|
const judgeRoute = tabItem.some(
|
|
(item) => item.key === router.currentRoute.value.path.replace("/", "")
|
|
);
|
|
activeTab.value = tabItem.findIndex(
|
|
(item) => item.key === router.currentRoute.value.path.replace("/", "")
|
|
);
|
|
tabbarVisible.value = judgeRoute;
|
|
showBorder.value = judgeRoute;
|
|
},
|
|
{ deep: true, immediate: true }
|
|
);
|
|
const tabSwitch = (_item, index) => {
|
|
switch (index) {
|
|
case 0:
|
|
router.push("/home");
|
|
break;
|
|
case 1:
|
|
router.push("/list");
|
|
break;
|
|
case 2:
|
|
router.push("/member");
|
|
break;
|
|
case 3:
|
|
router.push("/demo");
|
|
break;
|
|
}
|
|
activeTab.value = index;
|
|
};
|
|
const goBack = () => {
|
|
router.go(-1);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.nut-navbar {
|
|
margin-bottom: 0;
|
|
}
|
|
.main-page {
|
|
box-sizing: border-box;
|
|
height: calc(100vh - 92px);
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
.tabbar {
|
|
height: calc(100vh - 92px);
|
|
padding-bottom: 100px;
|
|
}
|
|
.border {
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
</style>
|