导航 - button-tab - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

import { ButtonTab, ButtonTabItem } from 'vux'
export default {
  components: {
    ButtonTab,
    ButtonTabItem
  }
}

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

button-tab

属性

名字	类型	默认值	说明	版本要求
value	number	0	当前选中索引值，从0开始，使用 `v-model` 绑定	—
height	number	30	高度值, 单位为像素	—

button-tab-item

属性

名字	类型	默认值	说明	版本要求
selected	boolean	false	是否选中	—

事件

名字	参数	说明	版本要求
@on-item-click	(index)	当前按钮点击时触发	—

## 样式变量

名字	默认值	说明	继承自变量
@button-tab-border-width	1px	未被使用
@button-tab-border-radius	16px	圆角边框的半径
@button-tab-border-color	#04BE02	边框的颜色	@theme-color
@button-tab-default-border-color	#04BE02	默认状态下圆角边框的颜色	@button-tab-border-color
@button-tab-active-border-color	#04BE02	未被使用	@button-tab-border-color
@button-tab-default-background-color	#fdfdfd	默认状态下的背景颜色
@button-tab-active-background-color	#04BE02	选中状态下的背景颜色	@theme-color
@button-tab-active-font-color	#FFF	未被使用
@button-tab-active-text-color	#FFF	未被使用	@button-tab-active-font-color
@button-tab-default-text-color	#999	默认状态下的文本颜色
@button-tab-height	30px	元素高度
@button-tab-line-height	31px	元素行高

贡献者

该组件(包含文档)迭代次数 15，贡献人数 4
airyland unclay Qiongrong Jiang Lin Sen

Changelog

发布日志

2.7.6 [fix] 修复分割线会消失的bug #2322
v2.2.0 [enhance] 更新 1px 边框
v2.1.0-rc.46 [feature] 添加更多less变量 #896 @erguotou520
v2.0.0 [enhance] 去除 Android 下点击可能出现的蓝色边框