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

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

 

先上效果图和代码:

自定义vant ui steps组件效果实现_第1张图片

(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 ui steps组件效果实现_第2张图片

 

自定义vant ui steps组件效果实现_第3张图片

  

  通过上面的两张图可以看到,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组件效果了

 

转载于:https://www.cnblogs.com/secretAngel/p/10599165.html

你可能感兴趣的:(自定义vant ui steps组件效果实现)