物流步骤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 (
      

        

          {
            (
              () => {
                switch (step) {
                  case '1':
                    return(
                      

                        
                        
                        
                        
                      
                    )
                  case '2':
                    return(
                      

                        
                        
                        
                        
                      
                    ) 
                  case '3': 
                    return(
                      

                        
                        
                        
                        
                      
                    ) 
                  case '4': 
                    return(
                      

                        
                        
                        
                        
                      
                    )   
                  default:
                    break;
                }
              }
            )()
          }
          
        
        

          1.提交申请
          2.待审核
          3.提交物流单号
          4.申请完成
        
      
    )
  }
}

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 (
      

         
        寄手机
      
    )
  }
}

THE  END