Tabbar
底部选项卡，点击 tab 会切换显示的页面。依赖 tabbar-item 组件。Demo
引入
import { Tabbar, TabbarItem } from 'vue-pmui';
// 全局使用
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabbarItem.name, TabbarItem);
// 或者
Vue.use(Tabbar);
Vue.use(TabbarItem);
例子
<pm-tabbar v-model="index">
<pm-tabbar-item icon="iconfont icon-home" :index="0">首页</pm-tabbar-item>
<pm-tabbar-item icon="iconfont icon-cart" :index="1">购物车</pm-tabbar-item>
<pm-tabbar-item icon="iconfont icon-people" :index="2">我的</pm-tabbar-item>
</pm-tabbar>
Props
tabbar
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 选中的标签页的index值，可根据该值进行业务处理 | String/Number |
tabbar-item
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| index | 当前标签页的索引值值 | String/Number | ||
| icon | 图标样式类名 | String | ||
| active-class | 当前标签页激活时的样式类名 | String |
Slots
tabbar
| Name | 描述 |
|---|---|
| default | 内容 |
tabbar-item
| Name | 描述 |
|---|---|
| default | 标签文本 |
| icon | 标签icon，覆盖icon属性 |