如果需要监听tab-item的点击事件并取得索引，请使用on-item-click事件:
<tab>
<tab-item @on-item-click="handler"></tab-item>
</tab>
tab
tab
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| line-width | number | 3 | 线条宽度 | -- |
| active-color | string | 选中时文字颜色 | -- | |
| default-color | string | 默认文字颜色 | -- | |
| disabled-color | string | 不可点击时文字颜色 | -- | |
| bar-active-color | string | 设置底部bar颜色，该颜色也可以通过less变量@tab-bar-active-color设置。 | -- | |
| animate | boolean | true | 切换时是否需要动画 | -- |
| custom-bar-width | string function | 设置底部bar宽度，默认宽度是整体tab宽度平分，比如50px。使用函数时参数为当前索引index，你可以定义不同tab-item对应的bar宽度。 | v2.1.1-rc.7 | |
| badge-label | string | 徽标文字 | v2.3.5 | |
| badge-background | string | 徽标背景颜色 | v2.3.5 | |
| badge-color | string | 徽标文字颜色 | v2.3.5 | |
| prevent-default | string | false | 是否禁止自动切换 tab-item | v2.7.2 |
| scroll-threshold | number | 4 | 滚动阀值，超过可滚动 | v2.8.1 |
| bar-position | string | bottom | 边框位置，可以为 bottom 或者 top。仅支持 animate 为 true 的情况。 | v2.9.0 |
tab-item
Variables
tab-item
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| disabled | boolean | false | 是否不可选 | -- |
| active-class | string | 当前项选中时的class | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-item-click | (index) | 当前 tabItem 被点击时触发 | v2.2.1-rc.4 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @tab-text-disabled-color | #ddd | -- | |
| @tab-text-default-color | #666 | -- | |
| @tab-text-active-color | #04BE02 | -- | @theme-color |
| @tab-bar-active-color | #04BE02 | -- | @theme-color |
Changelog
发布日志
- v2.9.1 [fix] 修复全局 box-sizing 为 border-box 时导致的高度问题 #2621。感谢 @suncodeer
- v2.9.0 [feature] 支持使用 bar-position 定义边框位置
- v2.8.1 [feature] 支持滚动
- v2.7.2 [feature] 支持阻止自动切换 #2176
- v2.3.5 [feature] 支持设置 badge #1513
- v2.2.1-rc.4 [enhance] 支持 on-item-click 带上 index 参数
- v2.1.1-rc.7 [feature] 支持定义 bar 宽度
- v2.1.1-rc.7 [fix] 修复初始化时没有 tab-item 时导致报错 #1038 @liu2010y
- v2.1.0-rc.46 [feature] 支持设置 `bar-active-color` #715 @greedying