Browse Source

docs(tabbar): 更新tabbar相关文档和注释

更新README.md文件中的配置说明和文件说明,使其更清晰准确
在store.ts中添加注释说明文件用途
feige996 8 months ago
parent
commit
2293e635bf
2 changed files with 7 additions and 6 deletions
  1. 6 6
      src/tabbar/README.md
  2. 1 0
      src/tabbar/store.ts

+ 6 - 6
src/tabbar/README.md

@@ -20,13 +20,13 @@
 
 ## tabbar 配置说明
 
-- 如果使用的是原生tabbar, 每个 `item` 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。
-- 如果使用的是自定义tabbar, 则每个 `item` 需要配置 `path`、`text`、`icon` 、`iconType` 等属性(如果是local还需要配置2种图片)。
+- 如果使用的是原生tabbar, 需要配置 `nativeTabbarList`,每个 `item` 需要配置 `path`、`text`、`iconPath`、`selectedIconPath` 等属性。
+- 如果使用的是自定义tabbar, 需要配置 `customTabbarList`,每个 `item` 需要配置 `path`、`text`、`icon` 、`iconType` 等属性(如果是 `image` 图片还需要配置2种图片)。
 
-## 接口拿到tabbar列表怎么处理?
+## 文件说明
 
-首先,接口的配置需要跟原生tabbar的 `path` 对应上
+`config.ts` 专门配置 `nativeTabbarList` 和 `customTabbarList` 的相关信息,请按照文件里面的注释配置相关项
 
-然后,可以直接在 `index.vue` 文件请求接口拿到 `tabbarList`,然后赋值给 `tabbarList` 即可
+`store.ts` 专门给 `自定义 tabbar` 提供状态管理,代码几乎不需要修改
 
-最后,如果用的是 `unocss` 图标,还需要在 `uno.config.ts` 的 `safelist` 中添加图标名称
+`index.vue` 专门给 `自定义 tabbar` 提供渲染逻辑,代码可以稍微修改,以符合自己的需求

+ 1 - 0
src/tabbar/store.ts

@@ -1,6 +1,7 @@
 import { tabbarList } from './config'
 
 /**
+ * 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
  * tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
  * 使用reactive简单状态,而不是 pinia 全局状态
  */