Tabbar 底部标签
优质
小牛编辑
133浏览
2023-12-01
import { Tabbar,TabbarItem } from 'feui';
components: {
[Tabbar.name]: Tabbar
[TabbarItem.name]: TabbarItem
}
代码演示
<fe-tabbar>
<tabbar-item>
<img slot="icon" src="../assets/images/logo-100.png" />
<span slot="label">主页</span>
</tabbar-item>
<tabbar-item show-dot>
<img slot="icon" src="../assets/images/logo-100.png" />
<span slot="label">消息</span>
</tabbar-item>
<tabbar-item selected link="/tabbar" icon-class='selected'>
<img slot="icon" src="../assets/images/logo-100.png" />
<span slot="label">通讯录</span>
</tabbar-item>
<tabbar-item badge="2">
<img slot="icon" src="../assets/images/logo-100.png" />
<span slot="label">我的</span>
</tabbar-item>
</fe-tabbar>
#Tabbar
API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| icon-class | 图标的class名 | String | - | - |
Slots
| Slot名 | 说明 | 备注 |
|---|---|---|
| default | tabbar主体内容，只允许tabbar-item | - |
#TabbarItem
API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| selected | 是否选中当前项，也可以用v-model来指定选中的tabbar-item的index | Boolean | false | false,true |
| badge | 徽标文字，不指定则不显示 | String | - | - |
| show-dot | 是否显示红点 | Boolean | false | false,true |
| link | 图标的class名 | Boolean | false | false,true |
| icon-class | 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的 | String | - | - |
Slots
| Slot名 | 说明 | 备注 |
|---|---|---|
| icon | 图标区域 | - |
| icon-active | 如果存在，当前 tabbar-item 点击时会显示，用于切换图标 | - |
| label | 图标下方文字 | - |
Events
| 事件名 | 参数 | 说明 | 备注 |
|---|---|---|---|
| on-item-click | index | 点击菜单项时触发 | - |