mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
42 lines
900 B
Vue
42 lines
900 B
Vue
<template>
|
|
<div class="zan-step" :class="statusClass">
|
|
<div class="zan-step__circle-container">
|
|
<i class="zan-step__circle" v-if="status !== 'process'"></i>
|
|
<i class="zan-icon zan-icon-checked" v-else></i>
|
|
</div>
|
|
<p class="zan-step__title">
|
|
<slot></slot>
|
|
</p>
|
|
<div class="zan-step__line"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'zan-step',
|
|
|
|
beforeCreate() {
|
|
this.$parent.steps.push(this);
|
|
},
|
|
|
|
computed: {
|
|
status() {
|
|
const index = this.$parent.steps.indexOf(this);
|
|
const active = this.$parent.active;
|
|
|
|
if (index === -1) {
|
|
return '';
|
|
} else if (index < active) {
|
|
return 'finish';
|
|
} else if (index === active) {
|
|
return 'process';
|
|
}
|
|
},
|
|
statusClass() {
|
|
const status = this.status;
|
|
return status ? 'zan-step--' + status : '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|