fix(tabbar): 修复图片模式下高亮图标属性名错误并更新文档

将 activeIcon 属性名统一改为 iconActive 以保持一致性
更新 README 文档,补充不同图标类型的配置说明
This commit is contained in:
feige996
2025-08-21 17:55:18 +08:00
parent 96f47f121c
commit ad2554079b
3 changed files with 50 additions and 4 deletions

View File

@@ -31,3 +31,48 @@
- `store.ts` ,专门给 `自定义 tabbar` 提供状态管理,代码几乎不需要修改。
- `index.vue` ,专门给 `自定义 tabbar` 提供渲染逻辑,代码可以稍微修改,以符合自己的需求。
## 自定义tabbar的不同类型的配置
- uniUi 图标
```js
{
// ... 其他配置
"iconType": "uniUi",
"icon": "home",
}
```
- unocss 图标
```js
{
// ... 其他配置
// 注意 unocss 图标需要如下处理:(二选一)
// 1在fg-tabbar.vue页面上引入一下并注释掉见tabbar/index.vue代码第2行
// 2配置到 unocss.config.ts 的 safelist 中
iconType: 'unocss',
icon: 'i-carbon-code',
}
```
- iconfont 图标
```js
{
// ... 其他配置
// 注意 iconfont 图标需要额外加上 'iconfont',如下
iconType: 'iconfont',
icon: 'iconfont icon-my',
}
```
- image 本地图片
```js
{
// ... 其他配置
// 使用 image需要配置 icon + iconActive 2张图片不推荐
// 既然已经用了自定义tabbar了就不建议用图片了所以不推荐
iconType: 'image',
icon: '/static/tabbar/home.png',
iconActive: '/static/tabbar/homeHL.png',
}
```