vue流程step组件

最新推荐文章于 2025-06-19 15:03:09 发布

猜不到我是谁

最新推荐文章于 2025-06-19 15:03:09 发布

阅读量8.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习 vue 文章标签： vue 流程

本文链接：https://blog.youkuaiyun.com/qq_43043859/article/details/90718213

前端学习同时被 2 个专栏收录

36 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文展示了一个使用Vue技术构建的流程步骤组件的效果图，详细介绍了如何在Vue应用中创建和使用这样的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

<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>