自定义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:;

              }

            }

            .lt-text {

              display: table-cell;

              padding-right: 10px;

              font-weight:;

              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:;

          }

        }

        .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组件效果了

巴特西

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

最新文章

热门文章