59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter, useRoute } from 'uni-mini-router'
|
|
import { onMounted, computed, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
currentName: {
|
|
type: String,
|
|
default: 'home'
|
|
}
|
|
})
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const activeTab = ref('home')
|
|
|
|
onMounted(() => {
|
|
activeTab.value = props.currentName
|
|
})
|
|
|
|
watch(activeTab, (val) => {
|
|
router.pushTab({ name: val })
|
|
})
|
|
|
|
const nameLabelIconMap = {
|
|
home: {
|
|
title: '进度查看',
|
|
icon: 'dashboard'
|
|
},
|
|
progress: {
|
|
title: '进度管理',
|
|
icon: 'transfer'
|
|
},
|
|
my: {
|
|
title: '我的',
|
|
icon: 'user'
|
|
}
|
|
}
|
|
|
|
const tabList = computed(() => router.routes.map((route: { name: keyof typeof nameLabelIconMap }) => {
|
|
return {
|
|
name: route.name,
|
|
title: nameLabelIconMap[route.name].title,
|
|
icon: nameLabelIconMap[route.name].icon
|
|
}
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<wd-tabbar v-model="activeTab" fixed safe-area-inset-bottom bordered placeholder>
|
|
<wd-tabbar-item v-for="(tab, i) in tabList" :name="tab.name" :title="tab.title" :icon="tab.icon" :key="i" />
|
|
</wd-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|