移动端实现步骤条

        最近有个新的需求，要在界面的底部实现一个步骤条，拿到需求的那刻就立马去了Vant UI官网想看看有没有现成的组件，果不其然还真有

 但后面仔细看了一下我的需求，发现如下图所示 ”审批中“状态下，步骤条的竖线只要一半呈蓝色，于是我又仔细看了一下步骤条组件的相关API，发现好像实现不了这种想要的效果

 没办法，只能自己动手封装一个了，相关样式可自行更改，相关代码如下：

<div class="flow">
     <p>审批流程：</p>
     <div class="steps">
         <div class="stepbox">
             <div class="box_left">
                 <div :class="['cricle', getStyle(State)]">{{ getText(1, State) }}</div>
                 <div :class="['line1', lineaStyle(State)]"></div>
                 <div :class="['line1', linebStyle(State)]"></div>
             </div>
             <div class="box_right">
                 <p>一级审批人 xxx</p>
                 <p>{{ StateText(State) }}</p>
             </div>
         </div>
         <div class="stepbox">
             <div class="box_left">
                 <div :class="['cricle', getStyle(State)]">{{ getText(2, State) }}</div>
                 <div :class="['line1', lineaStyle(State)]"></div>
                 <div :class="['line1', linebStyle(State)]"></div>
             </div>
             <div class="box_right">
                 <p>二级审批人 xxx</p>
                 <p>{{ StateText(State) }}</p>
             </div>
         </div>
         <div class="stepbox">
             <div class="box_left">
                 <div :class="['cricle', getStyle(State)]">{{ getText(3, State) }}</div>
             </div>
             <div class="box_right">
                 <p>三级审批人 xxx</p>
                 <p>{{ StateText(State) }}</p>
             </div>
         </div>
     </div>
</div>

CSS代码（这里我使用了less预编译）

// 步骤条
.steps{
  margin-top: 12px;
  margin-left: 16px;
  p{margin:0px}
  .stepbox{
    display: flex;
    .box_left{
      width: 50px;
      height: 68px;
      .cricle{
        width: 24px;
        height: 24px;
        border: 2px solid #ccc;
        border-radius: 50%;
        margin: 0 auto;
        font-size: 12px;
        text-align: center;
        line-height: 24px;
        color: #ccc;
      }
      //通过
      .agree{
        border-color: #409EFF;
        color: #409EFF;
      }
      // 驳回
      .reject{
        border-color: #FB6260;
        color: #fff;
        background-color: #FB6260;
      }
      //审批中
      .await{
        background-color: #409EFF;
        color: #fff;
        border-color: #409EFF;
      }
      .line1{
        width: 2px;
        height: 20px;
        background-color: #ccc;
        margin: 0 auto;
      }
      // 审批通过状态下的线条样式
      .agreeline{
        background-color: #409EFF;
      }
    }
    .box_right{
      font-size: 12px;
      width: 200px;
      height: 68px;
      p{
        height: 20px;
        line-height: 20px;
        &:first-child{
          color: #666;
        }
        &:last-child{
          color: #ccc;
        }
      }
    }
  }
}

JS代码

export default {
  data() {
    return {
      State: 0, //模拟审批状态 0 无状态  1 审批通过 2 审批中  3 驳回
    };
  },
  methods: {
    // 判断圆圈里面要显示的文本
    getText(value, state) {
      switch (state) {
        case 0:
          return value;
        case 1:
          return "✔";
        case 2:
          return value;
        default:
          return "×";
      }
    },
    // 判断圆圈的样式
    getStyle(value) {
      switch (value) {
        case 0:
          return;
        case 1:
          return "agree";
        case 2:
          return "await";
        default:
          return "reject";
      }
    },
    //判断线条样式
    lineaStyle(value) {
      if (value == 1 || value == 2) {
        return "agreeline";
      } else {
        return;
      }
    },
    // 第二根线条
    linebStyle(value) {
      if (value == 1) {
        return "agreeline";
      } else {
        return;
      }
    },
    // 通过审批状态判断显示的文本
    StateText(value) {
      switch (value) {
        case 0:
          return "未审批";
        case 1:
          return "审批通过";
        case 2:
          return "审批中";
        default:
          return "已驳回";
      }
    }
  }
};