<template>
|
<el-scrollbar ref="scrollerRef" always>
|
<div class="task-step">
|
<div
|
v-for="(item, index) in props.steps"
|
:key="index"
|
ref="activeItemRef"
|
class="task-step-item"
|
:style="{ 'flex-basis': flexBasis }"
|
>
|
<el-icon v-if="index < active" class="icon" size="22" color="#01f304"><CircleCheck /></el-icon>
|
|
<el-icon v-if="index === active" class="icon" size="22" color="#c25915">
|
<Clock />
|
</el-icon>
|
<el-icon v-if="index > active" class="icon" size="22" color="#7d7f83"><Clock /></el-icon>
|
<span class="text" :class="{ green: index < active, red: index === active, gray: index > active }">
|
{{ item }}
|
</span>
|
<span class="line"></span>
|
</div>
|
</div>
|
</el-scrollbar>
|
</template>
|
<script setup lang="ts">
|
import { CircleCheck, Clock } from '@element-plus/icons-vue'
|
import { computed, onMounted, ref, watch } from 'vue'
|
import { ElIcon, ElScrollbar } from 'element-plus'
|
|
export interface TaskStepProps {
|
active: number
|
steps: string[]
|
}
|
const props = defineProps<TaskStepProps>()
|
|
const flexBasis = computed(() => {
|
if (props.steps.length) {
|
const percentage = Math.floor((1 / props.steps.length) * 100)
|
|
return `${percentage > 20 ? percentage : 20}%`
|
}
|
return '0'
|
})
|
|
const activeItemRef = ref<HTMLDivElement[]>()
|
const scrollerRef = ref<typeof ElScrollbar>()
|
|
onMounted(() => {
|
watch(
|
() => [props.steps, activeItemRef.value, scrollerRef.value],
|
() => {
|
if (props.steps.length > 0 && activeItemRef.value?.length && scrollerRef?.value) {
|
const left = props.active >= 0 ? activeItemRef.value[props.active]?.offsetLeft ?? 20 : 20
|
requestAnimationFrame(() => {
|
scrollerRef?.value?.setScrollLeft?.(left - 20)
|
})
|
}
|
}
|
)
|
})
|
</script>
|
<style scoped lang="scss">
|
.task-step {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
}
|
.task-step-item {
|
display: flex;
|
align-items: center;
|
flex-grow: 1;
|
flex-shrink: 0;
|
&: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>
|
