/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-08-09 10:53:36
|
* @LastEditTime: 2022-08-18 16:21:02
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 自定义的卡片tab
|
*/
|
import React from 'react';
|
import './index.less';
|
|
/**
|
* tabs: array [{ value:"唯一值", label:"标题" }], // tab数据
|
* activeKey: string, // 当前选中项
|
* activeIndex: number, // 当前选中项的下标
|
* onChangeTab: func, // 点击tab回调
|
*/
|
const MyCardTab = ({ tabs = [], activeKey, activeIndex, onChangeTab }) => {
|
return (
|
<div className="myCardTab">
|
{tabs.map((item, index) => (
|
<div
|
className={`myCardTab-item ${activeKey === item.value ? 'myCardTab-item-active' : ''} ${
|
index === 0 || index === activeIndex || index === activeIndex + 1 ? '' : 'myCardTab-itemBorder'
|
}`}
|
key={item.value}
|
>
|
<div
|
className="myCardTab-item-bg"
|
style={{
|
borderBottomLeftRadius: index === activeIndex + 1 ? '10px' : '0',
|
borderBottomRightRadius: index === activeIndex - 1 ? '10px' : '0',
|
}}
|
>
|
<span onClick={() => !!onChangeTab && onChangeTab(item, index)}>{item.label}</span>
|
</div>
|
</div>
|
))}
|
</div>
|
);
|
};
|
|
export default MyCardTab;
|
