Tab组件说明文档
参数说明
hidden: false, // bool 是否渲染 默认false
bsStyle: 'block', //string,可选择tab组件的样式 ,两个值可选:block,tabs,默认为block
activeKey: 0, //string,当前高亮标签对应的eventKey的值
tabItems:[ //传入的标签数据
{
idx: 'tab0', //string,标签的唯一标识名称
eventKey: 0, //number, 标签的id
title: '全部档案', //string,标签内容
active: true, //bool,该标签初始时是否为高亮状态,true为高亮,false为不高亮,tabItems内高亮标签个数有且只有一个
}
],
maxTabLength:3, //手动自适应,如果autoAdaptive=true,则该字段无效,显示的最大数目,超出的将会在下拉菜单中显示 , 当小于零时会显示全部
autoAdaptive:false, //内容自适应,如果为true,则当浏览器宽度变化的时候会自适应内容,超出的内容会在下拉菜单中出现
callBack: (eventKey,event) => console.log(eventKey, event) // 点击回调函数 返回eventKey为当前索引,event为事件对象
组件使用方法
import Tab from './src/index.js'; //引入tab组件
state = {
bsStyle: 'block',
activeKey: '0',
tabItems:[
{
idx: 'tab0',
eventKey: 0,
title: '全部档案',
active: true,
children: '000'
},
{
idx: 'tab1',
eventKey: 1,
title: '招聘档案',
active: false,
children: '111'
},
{
idx: 'tab2',
eventKey: 2,
title: '绩效',
active: false,
children: '222'
}
],
maxTabLength:3,
autoAdaptive:false,
callBack: (eventKey,event) => console.log(eventKey, event)
}
//定义传入组件的数据
使用组件
<Tab {...this.state} /> //将数据传入组件