自定義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組件效果了