vue流程step组件

我就是我 2022-04-25 10:40 759阅读 0赞

# 效果图 #

![在这里插入图片描述][20190531161023246.png]  
![在这里插入图片描述][2019053116103546.png]

<template>
      <div id="steps">
        <div class="steps-item" v-for="(k,i) in stepArr" :key="k.id">
          <div class="label">{
        {
        k.label}}</div>
          <div class="content">
            <div class="header">
              <div class="dot" :class="{'dotSelect': current > i }" v-show="current!==i"></div>
              <img src="../../static/img/wait.png" alt="" v-show="current === i">
              <div class="title" :class="{'black' : (current === i || (current > i && i === 2) )}">{
        {
        k.title}}</div>
            </div>
            <div class="description">{
        {
        k.desc}}</div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          stepArr:[
            {
        label: '13:00', title: '系统已受理', desc: ''},
            {
        label: '', title: '系统正在处理......', desc: '请耐心等待。'},
            {
        label: '', title: '确认成功', desc: ''}
          ],
          current: 1,
        }
      },
      methods:{
        
    
      },
      created() {
        
        let date=new Date()
        let stepOne={
        
          label:`${
          date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${
          date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}`,
          title:'系统已受理',
          desc:''
        }
        this.stepArr[0]=stepOne
      },
      mounted() {
        
        setTimeout(()=>{
        
          let date=new Date()
          let stepTwo={
        
            label:`${
          date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${
          date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}`,
            title:'系统正在处理',
            desc:'请耐心等候'
          }
          let stepThree={
        
            label:`${
          date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()}:${
          date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()}`,
            title:'确认已完成',
            desc:''
          }
          this.stepArr.splice(1,2,stepTwo,stepThree)
          this.current=3
        },3000)
    
      }
    }
    </script>
    
    <style lang="less" scoped>
    #steps {
        
      padding: .2rem .3rem;
      .steps-item {
        
        display: flex;
        padding-bottom: .3rem;
    
        .label {
        
          font-size: .28rem;
          margin-right: .4rem;
          width: .6rem;
        }
        .content {
        
          font-size: .3rem;
          text-align: left;
    
          .header {
        
            display: flex;
            .dot {
        
              width: .3rem;
              height: .3rem;
              border-radius: 50%;
              background-color: #999;
            }
            .dotSelect {
        
              background-color: #4081EA;
            }
            .title {
        
              margin-left: .5rem;
              color: #999;
            }
            .black {
        
              color: #333;
            }
            img {
        
              width: .3rem;
              height: .3rem;
            }
          }
          .description {
        
            padding-left: .9rem;
            // border-left: .02rem solid #999;
          }
        }
      }
    }
    </style>

[20190531161023246.png]: /images/20220125/aa72b4bd13854aa1ae322b51eb9709b0.png
[2019053116103546.png]: /images/20220125/3859069a84d540248efc328f488d6b02.png