自定义vant ui steps组件效果实现

记录个问题，当作笔记吧：因为vue项目的移动端vant ui 的step组件跟ui设计图有差别，研究了半天还是没法使用step组件，只能手动设置一个

 

先上效果图和代码：

（1）HTML部分

<div class="rxlc-step">
  <div class="rxlc-content">
    <div class="content-list" v-for="(item, index) in rxlc_content" :key="index">
      <div class="content-list-lt">
        <div class="list-icon-title">
          <div class="lt-icon">
            <div class="lt-icon-box"></div>
          </div>
          <div class="lt-text">{{item.title}}</div>
        </div>
        <div class="white-line"></div>
      </div>
      <div class="content-list-rt">
        <div class="list-rt-content">{{item.text}}</div>
        <div class="cat-line"></div>
      </div>
    </div>
  </div>
</div>

（2）CSS部分

.rxlc-step {
    width: 100%;
    padding: 16px 18px 20px 17px;
    box-sizing: border-box;
    .rxlc-content {
      width: 100%;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
      border-radius: 10px;
      position: relative;
      .content-list {
        width: 100%;
        display: table;
        .content-list-lt {
          display: table-cell;
          background: #3db8ba;
          padding-left: 10px;
          position: relative;
          color: #ffffff;
          font-family: Noto Sans S Chinese Medium;
          font-size: 16px;
          .list-icon-title {
            display: table;
            .lt-icon {
              display: table-cell;
              .lt-icon-box {
                width: 5px;
                height: 5px;
                border-radius: 3px;
                background: #ffffff;
                margin-right: 7px;
                z-index: 999;
              }
            }
            .lt-text {
              display: table-cell;
              padding-right: 10px;
              font-weight: 550;
              font-size: 16px;
              line-height: 18px;
            }
          }
          .white-line {
            width: 1px;
            height: 100%;
            position: absolute;
            top: 34px;
            left: 12px;
            background: #ffffff;
            opacity: 0.2;
            z-index: 888;
          }
        }
        .content-list-rt {
          width: 70%;
          display: table-cell;
          .list-rt-content {
            padding: 22px 14px 0px 14px;
            color: #333333;
            font-size: 14.5px;
            line-height: 18px;
          }
          .cat-line {
            margin-left: 24px;
            margin-top: 20px;
            border-bottom: 1px solid #efefef;
          }
        }
        &:first-child {
          .content-list-lt {
            border-radius: 10px 0 0 0;
          }
        }
        &:last-child {
          .content-list-lt {
            border-radius: 0 0 0 10px;
            .white-line {
              width: 0px;
            }
          }
          .content-list-rt {
            .cat-line {
              margin-left: 10px;
              margin-top: 20px;
              border-bottom: none;
            }
          }
        }
      }
    }
  }

（3）JS部分

rxlc_content: [
        {
          title: '注册',
          text: '家长手机号注册账号'
        },
        {
          title: '新生信息采集',
          text: '报名信息采集，包括新生基础信息、监护人信息和个人相关图片资料上传；提交资料进入审核阶段'
        },
        {
          title: '网上审核',
          text: '网上报名资料提交至区教育局或下属单位进行审核确认'
        },
        {
          title: '现场审核',
          text: '网上报名资料审核通过，根据现场审核要求携带资料到指定地点审核确认'
        },
        {
          title: '录取',
          text: '新生现场审核通过，报读 学校发布录取通知。'
        }
      ]

 

　　说一下原理吧，其实我刚开始的时候想的是先给每一行的div(类名content-list)设置用display:table布局，先将标题和内容放在两个display:table-cell的子div(类名content-list-lt和content-list-rt)中，然后用绝对定位将白线定位到白色圆形的中心位置，后面发现白线位置好控制，但是会出现一个问题，就是因为每一行的高度是由内容的长度撑开的，白线的总长度就很难控制了，没办法，只能请教鹏哥了，他叫我参照下vant 的steps的样式，打开F12查看了下，发现了些好玩的东西，如下：

 

 

　　

　　通过上面的两张图可以看到，vant的steps组件的线条也是利用绝对定位来实现的，只是它的定位是相对于每个类名为vant-step的div（每一行内容所在的div），且它的高度为每一行内容的高度，即height:100%设置，这样各行的白色线条就连成一条竖直的线，那么步骤条的长度问题也得到解决。

　　需要注意的是我们最后一行的内容的白色线条是不需要展示出来的，因为实际我们要的线条段数为内容行数减1，所以最后一个div的线条的高度必须隐藏掉，所以给最后一个div的线条设置了width：0，其实设置height：0也是可以的。

　　这样我们将之前的代码改动一下，把白色线条放在每一行的div(类名content-list)下的左边子div(即类名content-list-lt)中，让线条相对这个类名为content-list-lt的div进行绝对定位，就能实现steps组件效果了