vue中进度条

梦里梦外; 2022-09-12 12:47 191阅读 0赞

最终实现的效果是这样的。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16][]

具体实现的代码

html

<ul class="steps__ul">
            <li class="steps__li" :class="{'active':active >= 0}">
              <img v-if="active >= 0" src="@/assets/bx_svg/1_dui.png"/>
              <img v-else src="@/assets/bx_svg/1.png"/>
              
              <p>{
       {$t('fome.Report')}}</p>
            </li>
            <div class="steps__right" :class="{'active':active >= 0}">
              
              <img v-if="active >= 0" src="@/assets/bx_svg/jt_2.png"/>
              <img v-else src="@/assets/bx_svg/jt_1.png"/>
            </div>
            <li class="steps__li" :class="{'active':active >= 1}">
              <img v-if="active >= 1" src="@/assets/bx_svg/2_dui.png"/>
              <img v-else src="@/assets/bx_svg/2.png"/>
              
              <p>{
       {$t('Intro.Application')}}</p>
            </li>
            <div class="steps__right" :class="{'active':active >= 1}">
              
              <img v-if="active >= 1" src="@/assets/bx_svg/jt_2.png"/>
              <img v-else src="@/assets/bx_svg/jt_1.png"/>
            </div>
            <li class="steps__li" :class="{'active':active >= 2}">
              <img v-if="active >= 2" src="@/assets/bx_svg/3_dui.png"/>
              <img v-else src="@/assets/bx_svg/3.png"/>
              
              <p>{
       {$t('form.Material')}}</p>
            </li>
            <div class="steps__right" :class="{'active':active >= 2}">
              
              <img v-if="active >= 2" src="@/assets/bx_svg/jt_2.png"/>
              <img v-else src="@/assets/bx_svg/jt_1.png"/>
            </div>
            <li class="steps__li" :class="{'active':active >= 3}">
              <img v-if="active >= 3" src="@/assets/bx_svg/4_dui.png"/>
              <img v-else src="@/assets/bx_svg/4.png" style="width: 100px;"/>
              
              <p>{
       {$t('form.closecase')}}</p>
            </li>
            <div class="steps__right" :class="{'active':active >= 3}">
              
              <img v-if="active >= 3" src="@/assets/bx_svg/jt_2.png" />
              <img v-else src="@/assets/bx_svg/jt_1.png" />
            </div>
            <li class="steps__li" :class="{'active':active >= 4}">
              <img v-if="active >= 4" src="@/assets/bx_svg/5_dui.png"/>
              <img v-else src="@/assets/bx_svg/5.png"/>
              <p>{
       {$t('cheack.Pay')}}</p>
            </li>
          </ul>

后端接口给我传的状态，我这边做了个判断
    handleLook (row) {
            this.dialogVisible = true
              let str ={
                reportNo:row.reportNo
              }
              this.$api.login.getProgress(str).then(res=> {
                if (res.data.code == 200) {
    
                  if(res.data.data === 'REPORT'){ //报案
                    this.active = 0
                  }else if(res.data.data === 'CLAIM'){ //申请理赔
                    this.active = 1
                  }else if(res.data.data === 'CHECK'){   //审核
                    this.active = 2
                  }else if(res.data.data === 'CLOSED'){   //审核
                    this.active = 3
                  }else if(res.data.data === 'PAYMENT'){   //审核
                    this.active = 4
                  }
                }
              })
          },

css中

//自定义步骤条
      .steps__ul{
        display: flex;
        width: 100%;
        .active{
          color: #005A5A;
          font-weight: 900;
        }
        //文字内容
        .steps__li{
          text-align: center;
          width: 200px;
          color: #00B1B1;
          img{
            width:50px;
            height: 50px;
            margin:0 auto;
        }
          p{
            font-size: 18px;
          }
        }
        //右箭头
        .steps__right{
          padding: 53px 10px 0;
          font-size: 20px;
          font-weight: 900;
          img{
            width: 50px;
          }
        }
      }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAUG9ubmVudWx0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/acacd725a3034568bb97d1cf79a4e160.png