<template>
|
<div class="task-step">
|
<div v-for="(item, index) in props.steps" :key="index" class="task-step-item" :style="{ 'flex-basis': flexBasis }">
|
<el-icon v-if="index + 1 < active" class="icon" size="22" color="#01f304"><CircleCheck /></el-icon>
|
|
<el-icon v-if="index + 1 === active" class="icon" size="22" color="#c25915"><Clock /></el-icon>
|
<el-icon v-if="index + 1 > active" class="icon" size="22" color="#7d7f83"><Clock /></el-icon>
|
<span class="text" :class="{ green: index + 1 < active, red: index + 1 === active, gray: index + 1 > active }">
|
{{ item }}
|
</span>
|
<span class="line"></span>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { CircleCheck, Clock } from '@element-plus/icons-vue'
|
import { computed } from 'vue'
|
|
export interface TaskStepProps {
|
active: number
|
steps: string[]
|
}
|
const props = defineProps<TaskStepProps>()
|
|
const flexBasis = computed(() => {
|
if (props.steps.length) {
|
return `${Math.floor((1 / props.steps.length) * 100)}%`
|
}
|
return '0'
|
})
|
</script>
|
<style scoped lang="scss">
|
.task-step {
|
display: flex;
|
align-items: center;
|
}
|
.task-step-item {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
&:last-child {
|
flex-basis: auto !important;
|
flex-shrink: 0;
|
flex-grow: 0;
|
& > .line {
|
display: none;
|
}
|
}
|
.icon {
|
margin-right: 6px;
|
}
|
.green {
|
color: #01f304;
|
}
|
.red {
|
color: #c25915;
|
}
|
.gray {
|
color: #7d7f83;
|
}
|
}
|
.text {
|
flex-shrink: 0;
|
}
|
.line {
|
display: inline-block;
|
height: 1px;
|
background-color: #fff;
|
width: 100%;
|
}
|
</style>
|
