支持简单模式，即不指定icon，label将垂直居中显示。
默认定位为 absolute，适用于 100%页面布局，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 position: fixed
tabbar
tabbar
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| icon-class | string | 图标的class名 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-index-change | -- | value 值变化时触发 | v2.5.4 |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | tabbar主体内容，只允许tabbar-item | -- |
tabbar-item
Variables
tabbar-item
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| selected | boolean | false | 是否选中当前项，你也可以使用v-model来指定选中的tabbar-item的index | -- |
| badge | string | 徽标文字，不指定则不显示 | -- | |
| show-dot | boolean | false | 是否显示红点 | -- |
| link | string | 链接，可以为普通url或者用vue-link的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转 | -- | |
| icon-class | string | 图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-item-click | -- | 点击菜单项时触发 | -- |
插槽
| 名字 | 说明 | 版本要求 |
| icon | 图标区域 | -- |
| icon-active | 如果存在，当前 tabbar-item 点击时会显示，用于切换图标 | v2.1.1-rc.8 |
| label | 图标下方文字 | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @tabbar-text-active-color | #09BB07 | -- | |
| @tabbar-index | 100 | -- |
Changelog
发布日志
- v2.7.7 [fix] 修复 tabbar-item 服务端渲染不一致问题
- v2.7.4 [enhance] 开发模式下对于非 100% 布局使用显示 absolute 定位说明
- v2.5.5 [feature] 支持 link 上使用 replace: true 写法 #1761
- v2.5.4 [feature] 增加事件 on-index-change #1715
- v2.1.1-rc.8 [feature] 支持点击时切换图标
- v2.1.1-rc.4 [fix] 修复 this.$slots 不存在 #1000 @asingingfish
- v2.1.1-rc.1 [fix] 修复 less 变量 @tabbar-text-active-color #982 @marsal1212