@beisen/tab-component v0.1.94

Tab组件说明文档

参数说明

const props = {

  /**
   * 是否渲染
   */
  hidden: false,

  /**
   * tab组件的样式
   * 可选：block(默认)，tabs
   */
  bsStyle: 'block',

  /**
   * 传入的标签数据
   */
  tabItems:[
    {
      /**
       * 标签的唯一标识名称
       */
      idx: 'tab0',

      /**
       * 标签的id 
       */
      eventKey: 0,

      /**
       * 标签内容
       */
      title: '全部档案',

      /**
       * 该标签初始时是否为高亮状态，
       * true   高亮
       * false  不高亮
       * tabItems内高亮标签个数有且只有一个
       */
      active: true,
    }
  ],

  /**
   * 内容自适应
   * 如果为true，则当浏览器宽度变化的时候会自适应内容，超出的内容会在下拉菜单中出现
   */
  autoAdaptive:false,

  /**
   * 手动自适应
   * 如果autoAdaptive=true，则该字段无效，显示的最大数目，超出的将会在下拉菜单中显示，当小于零时会显示全部
   */
  maxTabLength:3,

  /**
   * 默认不隐藏
   */
  hiddenTip:false,

  /**
   * 默认水平，可垂直
   */
  sideTip:false,

  /**
   * 点击回调函数
   * 返回eventKey为当前索引，event为事件对象
   */
  callBack: (eventKey,event) => console.log(eventKey, event)
}

组件使用方法

1.安装npm组件包

npm install @beisen/tab-component --save-dev

2.引用组件

import Tab from "@beisen/tab-component"

3. 传入参数

   该参数为上述参数，传入方式使用: data={参数}

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,
  hiddenTip:false,
  sideTip:false,
  callBack: (eventKey,event) => console.log(eventKey, event)
}
//定义传入组件的数据

使用组件

<Tab {...this.state} /> //将数据传入组件