From b05e0b8ec3936d0741b745e7af8d3d2b17906c13 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Sun, 24 Aug 2025 16:11:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabbar):=20=E6=B7=BB=E5=8A=A0=E5=BE=BD?=
 =?UTF-8?q?=E7=AB=A0=E6=98=BE=E7=A4=BA=E9=99=90=E5=88=B6=E5=92=8C=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

限制徽章数字显示最大为99+，并添加设置徽章的方法
---
 src/tabbar/config.ts | 5 ++++-
 src/tabbar/index.vue | 2 +-
 src/tabbar/store.ts  | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/tabbar/config.ts b/src/tabbar/config.ts
index 8a0a1e9..f5f9544 100644
--- a/src/tabbar/config.ts
+++ b/src/tabbar/config.ts
@@ -46,13 +46,16 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
+// badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
+export type CustomTabBarItemBadge = number | 'dot'
+
 export interface CustomTabBarItem {
   text: string
   pagePath: string
   iconType: 'uniUi' | 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
   icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
   iconActive?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
-  badge?: number | 'dot' // badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
+  badge?: CustomTabBarItemBadge
   isBulge?: boolean // 是否是中间的鼓包tabbarItem
 }
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
diff --git a/src/tabbar/index.vue b/src/tabbar/index.vue
index eaaf36b..f8b5ce3 100644
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -110,7 +110,7 @@ function getImageByIndex(index: number, item: CustomTabBarItem) {
               </template>
               <template v-else>
                 <view class="absolute right-0 top-0 h-4 w-4 center rounded-full bg-#f56c6c text-center text-xs text-white">
-                  {{ item.badge }}
+                  {{ item.badge > 99 ? '99+' : item.badge }}
                 </view>
               </template>
             </view>
diff --git a/src/tabbar/store.ts b/src/tabbar/store.ts
index 7ac71db..346769c 100644
--- a/src/tabbar/store.ts
+++ b/src/tabbar/store.ts
@@ -1,4 +1,4 @@
-import type { CustomTabBarItem } from './config'
+import type { CustomTabBarItem, CustomTabBarItemBadge } from './config'
 import { tabbarList as _tabbarList, customTabbarEnable } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
@@ -35,6 +35,9 @@ const tabbarStore = reactive({
     this.curIdx = idx
     uni.setStorageSync('app-tabbar-index', idx)
   },
+  setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) {
+    tabbarList[idx].badge = badge
+  },
   setAutoCurIdx(path: string) {
     const index = tabbarList.findIndex(item => item.pagePath === path)
     console.log('index:', index, path)