vant实现步骤条功能

vant实现步骤条功能

实现效果图

demandData.js文件的数据格式

module.exports=[
  {
    "demandName":"功能优化一期需求1",
    "proposeTime":"2021-05-23",
    "proposePart":"事业部",
    "proposePeople":"小小",
    "demandStage":["提出", "分析", "方案", "开发", "测试", "上线"],
    "demandStatus":"2",
    "demandSchedule":""
  },
  {
    "demandName":"功能优化二期需求2",
    "proposeTime":"2022-04-21",
    "proposePart":"策划部",
    "proposePeople":"月亮",
    "demandStage":["提出", "分析", "方案", "开发", "测试", "上线"],
    "demandStatus":"1",
    "demandSchedule":""
  }
]

实现代码

<template>
  <div class="demand">   
      <div v-for="(demandItem, index) in demandItemArr" :key="index" class="demandItem">
        <div class="demandName">{{demandItem.demandName}}</div>
        <div class="demandTitle demandTime"><span>提出时间：</span>{{demandItem.proposeTime}}</div>
        <div class="demandTitle"><span>提出部门：</span>{{demandItem.proposePart}}</div>
        <div class="demandTitle"><span>提出人：</span>{{demandItem.proposePeople}}</div>
        <div class="demandProgressBar">
          <span class="demndStage">阶段：</span>
          <van-steps :active="demandItem.demandStatus">
            <van-step v-for="(item, idx) in demandItem.demandStage" :key="idx">
              <template v-slot:active-icon>
                <!-- 自定义激活时的样式 -->
                <div class="step-item">
                  <div class="steps-active-icon">
                    <img src="../../../assets/img/activeIcon.png" alt="">
                  </div>
                  <!-- 一定要和激活状态写在一起，不然文字就去进度条上方了 -->
                  <span :class="demandItem.demandStatus == idx ? 'title-active' : ''">
                    {{ demandItem.demandStage[idx] }}
                  </span>
                </div>
              </template>
              <template v-slot:inactive-icon>
                <!-- 自定义未激活时的样式 由于版本问题，目前我只有slot两种，vant版本v2.12.7以上可以直接slot三种-->
                <div class="step-item">
                  <!-- 激活并且完成的样式 -->
                  <div v-if="demandItem.demandStatus > idx" class="steps-finish-icon">
                    <img src="../../../assets/img/finishIcon.png" alt="">
                  </div>
                  <!-- 未激活的样式 -->
                  <div v-else class="steps-inactive-icon">
                    <img src="../../../assets/img/inactiveIcon.png" alt="">
                  </div>
                  <!-- 一定要和激活状态写在一起，不然文字就去进度条上方了 -->
                  <span :class="demandItem.demandStatus > idx ? 'title-finish' : 'title-inactive'">
                    {{ demandItem.demandStage[idx] }}
                  </span>
                </div>
              </template>
            </van-step>
          </van-steps>
        </div>
        <div class="demandTitle"><span>当前预计：</span>{{demandItem.demandSchedule}}%</div>
      </div>
      <div class="tip">没有更多了</div>
    </div>
</template>

<script>
import demandData from '../../../assets/demandData';
export default {
  data() {
    return {
      demandItemArr:[]
    };
  },
  created() {
        console.log(demandData); 
        // 按时间倒叙进行数据处理，可不要
        demandData.sort(this.compare('proposeTime','inverted'));
        // 计算需求进行阶段占比，可不要
        demandData.forEach((item) => {
          item.demandSchedule = parseInt(Number(item.demandStatus)/Number(6)*100)
        })
        this.demandItemArr=demandData
  },
  mounted() {
  	// 禁用微信右上角按钮的分享功能，没有要求可以不要
    document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
      WeixinJSBridge.call("hideOptionMenu");
    });
    // 隐藏全局设置的客服功能图标，没有可以不要
    document.getElementById("pic").style.setProperty("display", "none");
  },
  methods: {
    //时间排序
    //prop：对象数组排序的键，
    //align：排序方式，"positive"正序，"inverted"倒序。
    compare(prop,align){
      return function(a,b){
        var value1=a[prop];
        var value2=b[prop];
        if(align=="positive"){//正序
            return new Date(value1)-new Date(value2);
        }else if(align=="inverted"){//倒序
            return new Date(value2)-new Date(value1);
        }
      }
    }

  }
};
</script>

<style lang="less" scoped>
.demand {
  margin: 15px;
  .demandItem {
    width: 100%;
    // height: 304px;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 0px 15px 12px;
    .demandName {
      padding: 15px 0px 10px 0px;
      font-family: PingFangSC-Semibold;
      font-size: 18px;
      font-weight: normal;
      color: #333333;
      border-bottom: dashed 1px #f4f4f4;
    }
    .demandTime{
      padding-top: 2px;
    }
    .demandTitle{
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #333333;
      line-height: 31px;
      span{
        color: #999999;
        display: inline-block;
        width: 85px;
      }
    }
    .demandProgressBar {
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #333333;
      line-height: 31px;
      .demndStage{
        color: #999999;
        display: inline-block;
        width: 85px;
      }
      .van-steps {
        width: 88%;
        margin: -16px auto 20px;
        padding: 0px 10px 0px 0px;
        overflow: visible; //如果不需要文字，或者不需要调整位置，可以不设置
        .step-item {
          position: relative;
          span {
            position: absolute;
            top: 24px;
            left: -6px;
            z-index: 1;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            display: inline-block;
            width: 36px;
          }
          .title-active {
            // 自定义文字激活
            color: #333333;
          }
          .title-inactive {
            //自定义未激活
            color: #999999;
          }
          .title-finish {
            // 自定义文字激活并且完成
            color: #333333;
          }
        }
        .steps-inactive-icon,
        .steps-active-icon,
        .steps-finish-icon {
          width: 22px;
          height: 22px;
          box-sizing: border-box;
        }
        /deep/ .van-step--horizontal:last-child .van-step__circle-container{
          right: 0px;
          left: -0.21333rem;
        }
        /deep/ .van-step--horizontal .van-step__circle-container{
          padding: 0px 4px;
        }
        /deep/ .van-step--horizontal .van-step__line {
          height: 2px; // 自定义调整进度条的粗细
          top: 28px; // 自定义调整进度条的位置
          background-color: #e4e4e4;
        }
        /deep/ .van-step--finish .van-step__line {
          background-color: #039591; //自定义激活时进度条的颜色
        }
      }
    }
  }
  .tip{
    text-align: center;
  }
}
</style>

本文参考链接：https://blog.csdn.net/qq_42857986/article/details/116231045