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"- 传入参数
该参数为上述参数，传入方式使用: 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} /> //将数据传入组件