feat: 添加pinia状态管理库和Tabbar组件
添加pinia状态管理库和Tabbar组件,以支持应用的状态管理和底部导航栏功能。
This commit is contained in:
0
src/components/.gitkeep
Normal file
0
src/components/.gitkeep
Normal 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>
|
||||
|
@ -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,
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
@ -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
14
src/pages/my/index.vue
Normal 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
11
src/router/index.ts
Normal 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;
|
Reference in New Issue
Block a user