uniapp 微信小程序 vue3.0+TS手写自定义封装步骤条（setup）

uniapp手写自定义步骤条（setup）

话不多说 先上效果图：

setup.vue组件代码：

<template>
  <view class="stepBox">
    <view
      class="stepitem"
      v-for="(item, index) in stepList"
      :key="index"
      :style="stepList.length > index + 1 ? 'width:200rpx' : 'width:60rpx'"
    >
      <img :src="item.activeimg" class="img" v-if="activestep >= index + 1" />
      <img :src="item.img" class="img" v-else />
      <view
        :class="activestep >= index + 1 ? 'circle activecircle' : 'circle'"
      ></view>
      <view
        :class="activestep > index + 1 ? 'line activeline' : 'line'"
        v-if="stepList.length > index + 1"
      ></view>
      <view :class="index + 1 == 3 ? 'text1' : 'text'">{{ item.title }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
const props = withDefaults(defineProps<{ activestep: Number }>(), {
  activestep: 0,
});
const stepList = ref<any>([
  {
    img: "../static/image/setups/a1.png",
    activeimg: "../static/image/setups/a.png",
    title: "未开始",
  },
  {
    img: "../static/image/setups/b1.png",
    activeimg: "../static/image/setups/b.png",
    title: "核查中",
  },
  {
    img: "../static/image/setups/c1.png",
    activeimg: "../static/image/setups/c.png",
    title: "结果审核中",
  },
  {
    img: "../static/image/setups/d1.png",
    activeimg: "../static/image/setups/d.png",
    title: "已完成",
  },
]);
</script>
<style lang="scss" scoped>
.stepBox {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  .stepitem {
    height: 150rpx;
    position: relative;

    .img {
      position: absolute;
      top: 0px;
      left: -18rpx;
      width: 56rpx;
      height: 56rpx;
    }
    .circle {
      position: absolute;
      top: 60rpx;
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background: #e7eaea;
    }
    .activecircle {
      background: #59c28a;
    }
    .line {
      position: absolute;
      top: 68rpx;
      left: 18rpx;
      border-bottom: 4rpx solid #e7eaea;
      width: calc(100% - 18rpx);
      z-index: 10;
    }
    .activeline {
      border-bottom: 4rpx solid #00cd73;
    }
    .text {
      position: absolute;
      top: 85rpx;
      left: -34rpx;
      font-size: 28rpx;
      color: #0e102b;
    }
    .text1 {
      position: absolute;
      top: 85rpx;
      left: -62rpx;
      font-size: 28rpx;
      color: #0e102b;
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

以下是用到的图片