Question

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	点击菜单项时触发	-