Преглед изворни кода

refactor(tabbar): 使用reactive包装tabbarList以提高响应性

feige996 пре 8 месеци
родитељ
комит
a51e9fb8dc
2 измењених фајлова са 5 додато и 3 уклоњено
  1. 1 1
      src/pages/about/about.vue
  2. 4 2
      src/tabbar/store.ts

+ 1 - 1
src/pages/about/about.vue

@@ -57,7 +57,7 @@ function gotoTabbar() {
 }
 // #region setTabbarBadge
 function setTabbarBadge() {
-  tabbarStore.setTabbarItemBadge(3, 10)
+  tabbarStore.setTabbarItemBadge(1, 10)
 }
 // #endregion
 </script>

+ 4 - 2
src/tabbar/store.ts

@@ -1,14 +1,16 @@
 import type { CustomTabBarItem, CustomTabBarItemBadge } from './config'
+import { reactive } from 'vue'
+
 import { tabbarList as _tabbarList, customTabbarEnable } from './config'
 
 // TODO 1/2: 中间的鼓包tabbarItem的开关
 const BULGE_ENABLE = false
 
 /** tabbarList 里面的 path 从 pages.config.ts 得到 */
-const tabbarList: CustomTabBarItem[] = _tabbarList.map(item => ({
+const tabbarList = reactive<CustomTabBarItem[]>(_tabbarList.map(item => ({
   ...item,
   pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`,
-}))
+})))
 
 if (customTabbarEnable && BULGE_ENABLE) {
   if (tabbarList.length % 2) {