@beisen/TabComponent v0.1.54

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} /> //将数据传入组件