
子组件
<!-- 进度条 -->
<template>
<div class="stepsBox u-flex">
<div class="stepsContent">
<div :class="['steps-item',
{ 'finished': current > num,
'process': current === num && num !== totalSteps,
'last-process': current === totalSteps && num === totalSteps,
'middle-wait': current < num && num !== totalSteps,
'last-wait': current < num && num === totalSteps,
}
]" v-for="num in totalSteps" :key="num" @click="onChange(num)">
<div class="m-steps-icon">
<span class="u-icon">{
{ num }}</span>
</div>
<div class="m-steps-content u-flex">
<div class="u-steps-description">{
{ stepsDesc[num-1].name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Steps",
props: {
stepsDesc: {
type: Array, // 步骤描述数组
default: () => {
return [];
},
},
totalSteps: {
type: Number,// 总的步骤数
default: 3,
},
currentStep: {
type: Number, // 当前选中的步骤
default: 1,
},
},
data () {
return {
// 若当前选中步骤超过总步骤数,则默认选择步骤1
current: this.currentStep > this.totalSteps ? 1 : this.currentStep,
};
},
watch: {
currentStep: {
handl