物流步骤UI组件（react）

突然间，发现自己写个好多组件，等闲下来，到时候，自己写个UI组件库，哈哈哈。

这个组件还能进行优化，思路是有但是栏主感觉不好上手。

废话不说啦

看代码吧

stepsFew.jsx

import React,{ Component } from 'react'
import './index.less'
export default class StepsFew extends Component {
 
  render() {
    const { step } = this.props;
    return (
      <div className='stepsWrap'>
        <div className='stepFew'>
          {
            (
              () => {
                switch (step) {
                  case '1':
                    return(
                      <div className='step'>
                        <span className='circle active'></span><span className='line'></span>
                        <span className='circle'></span><span className='line'></span>
                        <span className='circle'></span><span className='line'></span>
                        <span className='circle'></span>
                      </div>
                    )
                  case '2':
                    return(
                      <div className='step'>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span><span className='line'></span>
                        <span className='circle'></span><span className='line'></span>
                        <span className='circle'></span>
                      </div>
                    ) 
                  case '3': 
                    return(
                      <div className='step'>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span><span className='line'></span>
                        <span className='circle'></span>
                      </div>
                    ) 
                  case '4': 
                    return(
                      <div className='step'>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span><span className='line active'></span>
                        <span className='circle active'></span>
                      </div>
                    )   
                  default:
                    break;
                }
              }
            )()
          }
          
        </div>
        <div className='stepDesc'>
          <span>1.提交申请</span>
          <span>2.待审核</span>
          <span>3.提交物流单号</span>
          <span>4.申请完成</span>
        </div>
      </div>
    )
  }
}

index.less   不会配置less的同学，可以看我之前写的配置less的文章。（这里用sass也行）

.stepsWrap{
  height: 0.7rem;
  .stepFew {
    margin: 0 0.70rem;
    .step {
      display: -moz-box;  /* Firefox */
      display: -ms-flexbox;    /* IE10 */
      display: -webkit-box;    /* Safari */ 
      display: -webkit-flex;    /* Chrome, WebKit */
      display: flex;
      align-items:center;/*垂直居中*/
      justify-content: center;/*水平居中*/
      span{
        background-color: #DCDADA;
      }
      .circle{
        display: inline-block;
        width:0.2rem;
        height:0.2rem;
        border-radius:50%;
      }
      .active {
        background:rgba(246,90,111,1);
      }
      .line{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 0.02rem;
        width: 1.77rem;
      }
    }
  }
  .stepDesc{
    margin: 0.1rem 0.3rem;
    span{
      font-size:0.2rem;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:#262626;
      line-height:0.33rem;
    }
    span:nth-child(2) {
      margin-left: 1.1rem;
    }
    span:nth-child(3) {
      margin-left: 0.9rem;
    }
    span:nth-child(4) {
      margin-left: 0.8rem;
    }
  }
  
}

最后引用

import React,{ Component } from 'react'
import Header from '../components/header/Header';
import StepsFew from '../components/stepsFew/stepsFew'
export default class SendPhone extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }
  render() {
    return (
      <div className='container'>
         <StepsFew step='4' />
        寄手机
      </div>
    )
  }
}

THE  END