当前位置：首页 > news >正文

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

news 2025/6/28 20:55:51

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

话不多说先上效果图：
在这里插入图片描述
setup.vue组件代码：

<template><view class="stepBox"><viewclass="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>