采用 uniapp 实现的一款步进指示器组件，展示业务步骤进度等内容，对外提供“前进”、“后退”方法，让用户可高度自定义所需交互，适配 web、H5、微信小程序（其他平台小程序未测试过，可自行尝试）
可到插件市场下载尝试： https://ext.dcloud.net.cn/plugin?id=22603
- 使用示例
使用示例
分别演示vue2、vue3 setup示例
vue2 写法
<template>
<view>
<view class="font-class">示例一：</view>
<view>
<view style="background-color: #272822; padding: 10px; margin: 10px; border-radius: 6px; color: #fff;">
<wo-step-indicator :default-step="1" :options="steps" ref="stepIndicator1" @change="onChangeStep"></wo-step-indicator>
</view>
<view style="padding: 10px 0; margin: 0 10px;">
<view v-show="step === 1">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤一
</view>
</view>
<view v-show="step === 2">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤二
</view>
</view>
<view v-show="step === 3">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤三
</view>
</view>
<view v-show="step === 4">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤四
</view>
</view>
</view>
</view>
<view class="font-class">示例二：</view>
<view style="display: flex; gap: 10px;">
<view class="step-class" style="margin-right: 0px;">
<wo-step-indicator ref="stepIndicator2" @change="onChangeStep"></wo-step-indicator>
</view>
<view style="margin: 10px 10px 10px 0; flex: 1;">
<view v-show="step === 1">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤一
</view>
</view>
<view v-show="step === 2">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤二
</view>
</view>
<view v-show="step === 3">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤三
</view>
</view>
<view v-show="step === 4">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤四
</view>
</view>
</view>
</view>
<view class="font-class">自定义操作：</view>
<view style="display: flex; gap: 10px; padding-top: 10px;">
<button @click="prevStep" :disabled="step <= 1">上一步</button>
<button @click="nextStep" :disabled="step >= steps.length">下一步</button>
<button v-show="step >= steps.length">完成</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
steps: [
{
index: '1',
name: 'Step 1',
},
{
index: '2',
name: 'Step 2',
},
{
index: '3',
name: 'Step 3',
},
{
index: '4',
name: 'Step 4',
},
],
step: 1,
stepIndicator1: null,
stepIndicator2: null
};
},
methods: {
prevStep() {
this.$refs.stepIndicator1.prev();
this.$refs.stepIndicator2.prev();
},
nextStep() {
this.$refs.stepIndicator1.next();
this.$refs.stepIndicator2.next();
},
onChangeStep(data) {
this.step = data.step;
console.log('Current step:', data);
}
}
};
</script>
<style>
.font-class {
font-size: 12px;
padding: 10px 10px 0 10px;
}
.step-class {
background-color: #272822;
color: #fff;
padding: 15px;
margin: 10px;
border-radius: 6px;
}
</style>
vue3 setup写法
<template>
<view>
<view class="font-class">示例一：</view>
<view>
<view style="background-color: #272822; padding: 10px; margin: 10px; border-radius: 6px; color: #fff;">
<wo-step-indicator :default-step="1" :options="steps" ref="stepIndicator1"
@change="onChangeStep"></wo-step-indicator>
</view>
<view style="padding: 10px 0; margin: 0 10px;">
<view v-show="step === 1">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤一
</view>
</view>
<view v-show="step === 2">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤二
</view>
</view>
<view v-show="step === 3">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤三
</view>
</view>
<view v-show="step === 4">
<view
style="height: 100px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤四
</view>
</view>
</view>
</view>
<view class="font-class">示例二：</view>
<view style="display: flex; gap: 10px;">
<view class="step-class" style="margin-right: 0px;">
<wo-step-indicator ref="stepIndicator2" @change="onChangeStep"></wo-step-indicator>
</view>
<view style="margin: 10px 10px 10px 0; flex: 1;">
<view v-show="step === 1">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #299B48; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤一
</view>
</view>
<view v-show="step === 2">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color:#FF5739; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤二
</view>
</view>
<view v-show="step === 3">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #41A5E1; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤三
</view>
</view>
<view v-show="step === 4">
<view
style="height: 200px; width: 100%; border-radius: 6px; background-color: #272822; color: #fff; display: flex; justify-content: center; align-items: center;">
步骤四
</view>
</view>
</view>
</view>
<view class="font-class">自定义操作：</view>
<view style="display: flex; gap: 10px; padding-top: 10px;">
<button @click="prevStep" :disabled="step <= 1">上一步</button>
<button @click="nextStep" :disabled="step >= steps.length">下一步</button>
<button v-show="step >= steps.length">完成</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const steps = ref([
{ index: '1', name: 'Step 1' },
{ index: '2', name: 'Step 2' },
{ index: '3', name: 'Step 3' },
{ index: '4', name: 'Step 4' },
]);
const step = ref(1);
const stepIndicator1 = ref(null);
const stepIndicator2 = ref(null);
const prevStep = () => {
stepIndicator1.value.prev();
stepIndicator2.value.prev();
};
const nextStep = () => {
stepIndicator1.value.next();
stepIndicator2.value.next();
};
const onChangeStep = (data) => {
step.value = data.step;
console.log('Current step:', data);
};
</script>
<style>
.font-class {
font-size: 12px;
padding: 10px 10px 0 10px;
}
.step-class {
background-color: #272822;
color: #fff;
padding: 15px;
margin: 10px;
border-radius: 6px;
}
</style>
