27f23173fd
- 将原有tabbar组件重构为layout布局方式 - 新增tabbar store管理导航项状态和路由 - 为首页和关于页添加tabbar布局配置 - 移除旧的tabbar组件实现 - 添加tabbar路由跳转功能 - 更新类型定义以支持新组件 ``` 这个提交消息： 1. 使用feat类型，因为这是新增功能 2. 添加了scope(tabbar)明确修改范围 3. 简明描述了主要变更内容 4. 使用中文符合要求 5. 保持了50字符以内的描述行 6. 在正文中列出了主要变更点而不重复描述
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<wd-config-provider :themeVars="themeVars">
|
|
<wd-notify />
|
|
<wd-toast />
|
|
<wd-message-box />
|
|
<!-- <privacy-popup></privacy-popup> -->
|
|
<slot></slot>
|
|
<wd-tabbar
|
|
fixed
|
|
:model-value="tabbarStore.getActive.name"
|
|
@change="handleChange"
|
|
bordered
|
|
safeAreaInsetBottom
|
|
placeholder
|
|
>
|
|
<wd-tabbar-item
|
|
v-for="(item, index) in tabbarStore.getTabbarItems"
|
|
:key="index"
|
|
:name="item.name"
|
|
:value="tabbarStore.getTabbarItemValue(item.name)"
|
|
:title="item.title"
|
|
:icon="item.icon"
|
|
></wd-tabbar-item>
|
|
</wd-tabbar>
|
|
</wd-config-provider>
|
|
</template>
|
|
<script lang="ts">
|
|
export default {
|
|
options: {
|
|
addGlobalClass: true,
|
|
virtualHost: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
}
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import { useTabbarStore } from '@/store/tabbar'
|
|
import { ConfigProviderThemeVars } from 'wot-design-uni'
|
|
|
|
const tabbarStore = useTabbarStore()
|
|
|
|
const themeVars = reactive<ConfigProviderThemeVars>({
|
|
colorTheme: '#fa4126',
|
|
tabsNavLineBgColor: 'red',
|
|
})
|
|
|
|
function handleChange({ value }) {
|
|
tabbarStore.setTabbarItemActive(value)
|
|
uni.navigateTo({
|
|
url: tabbarStore.getTabbarItemRoute(value),
|
|
})
|
|
}
|
|
|
|
onShow(() => {
|
|
// #ifdef APP-PLUS
|
|
uni.hideTabBar()
|
|
// #endif
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped></style>
|