步骤条组件

最近做了一个步骤条组件，使用的是vue3语法，vue2请自己做兼容

先上样式

<template>
  <!-- 步骤条 -->
  <view class="box-top" v-for="(item, index) in dataArray" :key="index">
    <view class="left-box-top">{{ item.createTime }}</view>
    <!-- 左边 -->
    <view
      class="line"
      :class="{ active: item.active, none: index == dataArray.length - 1 }"
    >
      <!-- 中线 -->
      <view class="dot" :class="{ active: item.active }"></view>
      <!-- 圆点 -->
    </view>
    <view class="right-box-top">
      <!-- 右边 -->
      <view>{{ item.msg }}</view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, watch, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const props = defineProps({
  dataArray: {
    type: Array,
  },
});
watch(
  () => props.dataArray,
  (newValue, oldValue) => {
    console.log('数据变化了', newValue);
    if (newValue) {
      if (props.dataArray[0]) {
        Object.assign(props.dataArray[0], {
          active: true,
        });
      }
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
onLoad(() => {
  console.log(props.dataArray);
});
</script>

<style lang="scss">
.box-top {
  width: 100%;
  min-height: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;

  .left-box-top {
    width: 180rpx;
    text-align: center;
    color: rgba(198, 198, 198, 1);
    font-size: 24rpx;
  }

  .line {
    width: 4rpx;
    background-color: #999999;
    margin: 0 20rpx 0 20rpx;

    .dot {
      width: 20rpx;
      height: 20rpx;
      border: 1rpx solid #979797;
      background-color: #ffffff;
      border-radius: 50%;
      position: relative;
      left: -10rpx;
    }
  }

  .right-box-top {
    flex: 1;
    padding: 0 0 20rpx 0;
    font-size: 24rpx
  }
}

//激活元素
.active {
  background: #161874 !important;
}

// 隐藏元素
.none {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>

使用

<Step :dataArray="你想传的数据" />