feat: 添加pinia状态管理库和Tabbar组件

添加pinia状态管理库和Tabbar组件,以支持应用的状态管理和底部导航栏功能。
This commit is contained in:
2024-09-15 02:43:15 +08:00
parent 6b64245028
commit 34222f94d8
13 changed files with 665 additions and 44 deletions

0
src/components/.gitkeep Normal file
View File

View File

@ -1,13 +1,58 @@
<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>
tabbar
<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>
<style scoped></style>

View File

@ -1,6 +1,7 @@
import { createSSRApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
import "uno.css";
@ -9,6 +10,7 @@ export function createApp() {
const app = createSSRApp(App);
app.use(pinia);
app.use(router);
return {
app,

View File

@ -1,16 +1,40 @@
{
"pages": [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages
"pages": [
{
"name": "home",
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
"navigationBarTitleText": "进度查看"
}
},
{
"name": "my",
"path": "pages/my/index",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"tabBar": {
"custom": true,
"color": "#bfbfbf",
"selectedColor": "#0165FF",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "进度查看"
},
{
"pagePath": "pages/my/index",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarTitleText": "XSH PPMP",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
}

View File

@ -5,15 +5,18 @@
<p class="title text-red-500">
{{ title }}
</p>
<button @click="onClick">increment</button>
<WdButton @click="onClick">Increment</WdButton>
<Tabbar current-name="home" />
</div>
</div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { computed } from 'vue';
import { ref } from 'vue'
import Tabbar from '@/components/Tabbar.vue';
const user = useUserStore()

14
src/pages/my/index.vue Normal file
View File

@ -0,0 +1,14 @@
<script lang="ts" setup>
import Tabbar from '@/components/Tabbar.vue';
</script>
<template>
<div>
<h1>我的页面</h1>
<Tabbar current-name="my" />
</div>
</template>
<style scoped>
</style>

11
src/router/index.ts Normal file
View File

@ -0,0 +1,11 @@
import { createRouter } from "uni-mini-router";
// 导入pages.json
import pagesJson from "../pages.json";
// 引入uni-parse-pages
import pagesJsonToRoutes from "uni-parse-pages";
// 生成路由表
const routes = pagesJsonToRoutes(pagesJson);
const router = createRouter({
routes: [...routes], // 路由表信息
});
export default router;