Tabbar 底部标签页
优质
小牛编辑
131浏览
2023-12-01
使用指南
组件介绍
底部标签栏，可自定义图标和颜色。
引入方式
import { Tabbar, TabbarItem } from "feart";
components: {
'fe-tabbar': Tabbar,
'fe-tabbar-item': TabbarItem
}代码演示
基础用法
<fe-tabbar v-model="active">
<fe-tabbar-item name="item01" icon="star">
<label slot="text">首页</label>
</fe-tabbar-item>
<fe-tabbar-item name="item02" icon="search">
<label slot="text">发现</label>
</fe-tabbar-item>
<fe-tabbar-item name="item03" icon="star">
<label slot="text">发布</label>
</fe-tabbar-item>
</fe-tabbar>定位底部
<fe-tabbar v-model="active" @on-active-change="onActiveChange" fixed>
<fe-tabbar-item name="item1" link="/" icon="star">
<label slot="text">首页</label>
</fe-tabbar-item>
<fe-tabbar-item name="item2" icon="search" show-dot>
<label slot="text">发现</label>
</fe-tabbar-item>
<fe-tabbar-item name="item3" icon="star">
<label slot="text">发布</label>
</fe-tabbar-item>
<fe-tabbar-item name="item4" icon="more" badge="3">
<label slot="text">消息</label>
</fe-tabbar-item>
<fe-tabbar-item name="item5" icon="layout">
<label slot="text">我的</label>
</fe-tabbar-item>
</fe-tabbar>API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| v-model | 当前选中标签的名称 | String |
- | - |
| fixed | 是否固定在底部 | Boolen |
false | true,false |
Slots
| 插槽名 | 说明 | 备注 |
|---|---|---|
| default | tabbar 主体内容 | - |
| - | - | - |
Events
| 事件名 | 参数 | 说明 | 备注 |
|---|---|---|---|
| @on-active-change | - | value 值变化时触发 | - |
| - | - | - | - |
TabbarItem
API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| name | 标签名称 | String |
- | - |
| icon | 图标名称 | String |
- | - |
| badge | 徽标文字，不指定则不显示 | String |
- | - |
| show-dot | 是否显示红点 | Boolean |
false |
true,false |
| link | 跳转链接 | String |
- | - |
| - | - | - | - | - |
Slots
| 插槽名 | 说明 | 备注 |
|---|---|---|
| text | 图标下方文字 | - |
| - | - | - |
Events
| 事件名 | 参数 | 说明 | 备注 |
|---|---|---|---|
| @on-item-click | - | 点击菜单项时触发 | - |
| - | - | - | - |
Style variable
| 样式变量名 | 默认值 | 说明 |
|---|---|---|
| @tabbar-text-active-color | #1b82d2 | - |
| @tabbar-text-inactive-color | #949494 | - |