110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import yl from '@/assets/img/yl.png';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const navigation = ref([
|
|
{
|
|
title: '首页',
|
|
link: {
|
|
name: 'home',
|
|
path: '/home'
|
|
},
|
|
// icon: '/tabbar/home.png',
|
|
icon: 'home-o',
|
|
inactive: ''
|
|
},
|
|
{
|
|
title: '伊调研',
|
|
// link: {
|
|
// name: 'home',
|
|
// path: '/home'
|
|
// },
|
|
icon: yl
|
|
},
|
|
{
|
|
title: '我的',
|
|
link: {
|
|
name: '',
|
|
path: '/survey'
|
|
},
|
|
icon: 'friends-o'
|
|
// icon: '/tabbar/mine.png'
|
|
}
|
|
]);
|
|
|
|
// 当前的 nav
|
|
const currentNav = computed(() => {
|
|
// 第一种方式
|
|
const nav = navigation.value.find((item) => item?.link?.path === route.fullPath);
|
|
// 第二种方式
|
|
// const nav = navigation.value.find((item) => item?.link?.path === window.location.pathname);
|
|
|
|
return nav;
|
|
});
|
|
const activeTab = ref(currentNav.value?.title);
|
|
|
|
/**
|
|
* Handle changing of navigation
|
|
* @param {object} nav - the navigation item selected
|
|
*/
|
|
function handleChangeNav(title: string) {
|
|
const nav = navigation.value.find((item) => item.title === title);
|
|
const params: { [key: string]: string } = {};
|
|
// 如果有 name 表示，优先取 name 参数
|
|
nav && nav.link?.name.length !== 0
|
|
? (params.name = nav?.link?.name as string)
|
|
: (params.path = nav?.link?.path as string);
|
|
router.push(params);
|
|
}
|
|
|
|
watch(activeTab, (value) => {
|
|
handleChangeNav(value as string);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<van-tabbar v-model="activeTab" class="navigation">
|
|
<template v-for="(item, index) in navigation" :key="item.title">
|
|
<span
|
|
v-if="index === 1"
|
|
style="
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<img :src="item.icon" alt="" style="width: 30px; height: 30px" />
|
|
{{ item.title }}
|
|
</span>
|
|
<van-tabbar-item v-else :icon="item.icon" :name="item.title">
|
|
{{ item.title }}
|
|
</van-tabbar-item>
|
|
</template>
|
|
</van-tabbar>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.navigation {
|
|
padding: 3px 0;
|
|
// width: 100vw;
|
|
// background-color: white;
|
|
// display: flex;
|
|
// flex-flow: row;
|
|
// justify-content: space-around;
|
|
// position: fixed;
|
|
// bottom: 0px;
|
|
// z-index: 10;
|
|
}
|
|
|
|
.navigation-item {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
}
|
|
</style>
|