React实现步骤条组件封装

最近项目里需要用到步骤条的功能，但是ui给出的设计图我一看在antd上都没有这种样式的步骤条啊，所以得自己手动实现封装一个步骤条组件来使用，先看一下封装后的步骤条效果图：

实现思路：

首先我是使用了ul中的每个li，用浮动:float:left的方式将每个li向左浮动，我们将这个步骤条分成三大部分，首（第一个 li）、中（中间的 li）、尾（最后一个 li），第一个li我们可以拆解为一个长方形的 div右边加上一个 css 实现的一个 span 三角形；最后一个的li跟第一个正好相反：一个长方形的 div左边加上一个 css 实现的一个 span 三角形;中间部分的li就是结合在一起：一个 div 前后加上三角形就行了；

完整代码

这里就两个文件不到 200 行的代码：css 文件和tsx 文件

CustomSteps 文件：

import classnames from "classnames";

import styles from "./index.less";

type StepObjType = {
  key: string;
  title: string;
  content: React.ReactNode | string | undefined;
};

interface CustomStepsProps {
  current: number;
  items: StepObjType[];
}

const CustomSteps: React.FC<CustomStepsProps> = ({ current = 1, items = [] }) => {
  // 步骤条内容
  const StepContent = ({ title, stepNumber }: { title: string; stepNumber: number }) => (
    <div
      className={classnames(styles.block, {
        [styles.bgColor]: current !== stepNumber,
        [styles.active]: current == stepNumber,
      })}
    >
      {title}
    </div>
  );

  // 这里只有最后步骤条或者中间的步骤条才有，第一个没有
  const StepAfterNode = ({ stepNumber }: { stepNumber: number }) => (
    <samp
      className={classnames(styles.less1, styles.left, {
        [styles.bgColor]: current !== stepNumber,
      })}
    ></samp>
  );

  return (
    <div className={styles.stepsPage}>
      <ul>
        {items?.map((item: StepObjType, index: number) => {
          const stepNumber = index + 1;
          let node = undefined;
          if (stepNumber == 1) {
            node = (
              <li key={item.key} style={{ width: `calc( 100% / ${items.length})` }}>
                <StepContent stepNumber={stepNumber} title={item?.title} />
                <span
                  className={classnames(styles.less, {
                    [styles.bgBorderColor]: current !== stepNumber,
                  })}
                ></span>
              </li>
            );
          } else if (index == items.length - 1) {
            node = (
              <li key={item.key} style={{ backgroundColor: current == stepNumber ? "#007eff" : "#f5f5f5f5", width: `calc( 100% / ${items.length})` }}>
                <StepAfterNode stepNumber={stepNumber} />
                <StepContent stepNumber={stepNumber} title={item?.title} />
              </li>
            );
          } else {
            node = (
              <li key={item.key} style={{ width: `calc( 100% / ${items.length})` }}>
                <StepAfterNode stepNumber={stepNumber} />
                <StepContent stepNumber={stepNumber} title={item?.title} />
                <span
                  className={classnames(styles.less, styles.right, {
                    [styles.bgBorderColor]: current !== stepNumber,
                  })}
                ></span>
              </li>
            );
          }
          return node;
        })}
        <div className={styles.clearfix}></div>
      </ul>
      {/* content */}
      <div className={styles.stepscontent}>{items[current - 1]?.content}</div>
    </div>
  );
};

export default CustomSteps;

CSS 文件：

.stepsPage {
  .clearfix {
    clear: both;
  }
  ul {
    width: 100%;
    padding: 0;
    list-style: none;
  }
  li {
    position: relative;
    float: left;
    // width: 376px;
    // width: calc(100% / 4);
    height: 40px;
    margin-bottom: 10px;
    list-style: none;
    flex: 1;
  }
  .less {
    top: 0;
    border-color: transparent transparent transparent #007eff;
    border-style: dashed dashed dashed solid;
    border-width: 25px 0 15px 20px;
    transition: all 0.5;
  } /*dashed 设置透明*/
  .less1 {
    top: 0;
    border-color: transparent transparent transparent #fff;
    border-style: dashed dashed dashed solid;
    border-width: 25px 0 15px 20px;
  }
  .right {
    right: 0;
  }
  .left {
    left: 0;
  }
  samp {
    position: absolute;
    z-index: 2;
    display: block;
  }
  span {
    position: relative;
    z-index: 3;
    display: block;
    float: left;
  }
  .block {
    z-index: 1;
    float: left;
    // width: 357px;
    width: 92%;
    height: 40px;
    color: #222222;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    background: #007eff;
  }
  .bgColor {
    background: #f5f5f5;
  }
  .bgBorderColor {
    border-color: transparent transparent transparent #f5f5f5;
  }
  .active {
    color: #fff;
  }

  .stepscontent {
    width: 100%;
    height: 200px;
    margin-top: 20px;
    background-color: #f7f7f7;
  }

  @media screen and (max-width: 1230px) {
     .block {
      width: 90%;
     }
  }
  @media screen and (max-width: 848px) {
    .block {
     width: 86%;
    }
 }
}

以上就是 React 封装的一个步骤条组件，希望对大家有帮助，如果上面的实现有啥问题，欢迎各位大佬指点指点啊。

以上关于React实现步骤条组件封装的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。