React后台管理（十）-- 页面开发前准备---Tabs 标签页组件封装

---

一、组件源码+解析如下

// @/layout/tabs/index.jsx
import React, { useMemo } from "react";
import "./index.scss";

const CdTabs = (props) => {
  // 获取标题
  const tit = useMemo(() => {
    return props.title || "";
  }, [props.title]);
  return (
    <div className="tabs-menu-container">
      <div className="tabs-menu-header">
        <h4 className="title">
          <strong>{tit}</strong>
        </h4>
      </div>
      <>{props.children}</>
    </div>
  );
};

export default CdTabs;

-------------------------------------------------------------------------------------------------------------------

// @/layout/tabs/index.scss
.tabs-menu-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tabs-menu-header {
  .title {
    padding: 16px 0;
    font-size: 20px;
    line-height: 28px;
  }
}
.tabs-menu-warp {
  display: flex;
  li {
    position: relative;
    color: #555555;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    padding: 14px 0 12px;
    white-space: nowrap;
    span {
      margin-left: 2px;
      font-size: 12px;
      font-weight: normal;
    }
    + li {
      margin-left: 40px;
    }
    &::after {
      display: none;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 2px solid #2e74ff;
    }
  }
  .current {
    color: #2e74ff;
    font-weight: bold;
    &::after {
      display: block;
    }
  }
}

二、页面使用方式

// 引用tabs组件
import CdTabs from "@/layout/tabs/index.jsx";
// html
<CdTabs title="客户管理">
  <Space size={10}>
     <Button type="primary">新增</Button>
     <Button>导 出</Button>
  </Space>
</CdTabs>

三、效果展示

---

总结

下一篇讲【开发页面前准备 — 搜索组件封装】。关注本栏目，会实时更新。