tab

Tab

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

tab - 图1

二维码

tab - 图2

Install

安装

局部注册

全局注册

import { Tab, TabItem } from 'vux'
export default {
  components: {
    Tab,
    TabItem
  }
}

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

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

<tab>
  <tab-item @on-item-click="handler"></tab-item>
</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

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

Variables

## 样式变量

Issues