Tab

Tab

demo 原始链接demo 源码编辑文档组件源码

tab - 图1

二维码

tab - 图2

Install

安装

局部注册

全局注册

  1. import { Tab, TabItem } from 'vux'
  2. export default {
  3. components: {
  4. Tab,
  5. TabItem
  6. }
  7. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Tab, TabItem } from 'vux'
  4. Vue.component('tab', Tab)
  5. Vue.component('tab-item', TabItem)

如果需要监听tab-item的点击事件并取得索引,请使用on-item-click事件:

  1. <tab>
  2. <tab-item @on-item-click="handler"></tab-item>
  3. </tab>

tab

tab

属性

名字类型默认值说明版本要求
line-widthnumber3线条宽度
active-colorstring选中时文字颜色
default-colorstring默认文字颜色
disabled-colorstring不可点击时文字颜色
bar-active-colorstring设置底部bar颜色,该颜色也可以通过less变量@tab-bar-active-color设置。
animatebooleantrue切换时是否需要动画
custom-bar-widthstring function设置底部bar宽度,默认宽度是整体tab宽度平分,比如50px。使用函数时参数为当前索引index,你可以定义不同tab-item对应的bar宽度。v2.1.1-rc.7
badge-labelstring徽标文字v2.3.5
badge-backgroundstring徽标背景颜色v2.3.5
badge-colorstring徽标文字颜色v2.3.5
prevent-defaultstringfalse是否禁止自动切换 tab-itemv2.7.2
scroll-thresholdnumber4滚动阀值,超过可滚动v2.8.1
bar-positionstringbottom边框位置,可以为 bottom 或者 top。仅支持 animate 为 true 的情况。v2.9.0

tab-item

tab-item

属性

名字类型默认值说明版本要求
disabledbooleanfalse是否不可选
active-classstring当前项选中时的class

事件

名字参数说明版本要求
@on-item-click(index)当前 tabItem 被点击时触发v2.2.1-rc.4

Variables

## 样式变量


名字默认值说明继承自变量
@tab-text-disabled-color #ddd
@tab-text-default-color #666
@tab-text-active-color #04BE02 @theme-color
@tab-bar-active-color #04BE02 @theme-color

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 28,贡献人数 5
airylandconsole万刚Kwan

Changelog

发布日志

  • v2.9.4 [change] 修复 tab的父级width没有100%或者有padding 滚动造成文字跟横杠错位问题 #2850
  • 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