From 456d6ed3fb5412575cb7541d3a0a601466d97038 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 13 十一月 2023 16:56:11 +0800
Subject: [PATCH] feat: step组件适配工序过多情况;修复任务少于3条时展示收起按钮的问题
---
src/views/dashboard/components/TaskStep.vue | 59 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 46 insertions(+), 13 deletions(-)
diff --git a/src/views/dashboard/components/TaskStep.vue b/src/views/dashboard/components/TaskStep.vue
index b9f02b6..bdbe0d0 100644
--- a/src/views/dashboard/components/TaskStep.vue
+++ b/src/views/dashboard/components/TaskStep.vue
@@ -1,20 +1,31 @@
<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-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 + 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>
+ <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>
- </div>
+ </el-scrollbar>
</template>
<script setup lang="ts">
import { CircleCheck, Clock } from '@element-plus/icons-vue'
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { ElIcon, ElScrollbar } from 'element-plus'
export interface TaskStepProps {
active: number
@@ -24,20 +35,42 @@
const flexBasis = computed(() => {
if (props.steps.length) {
- return `${Math.floor((1 / props.steps.length) * 100)}%`
+ const percentage = Math.floor((1 / props.steps.length) * 100)
+
+ return `${percentage > 20 ? percentage : 20}%`
}
return '0'
+})
+
+const activeItemRef = ref<(typeof HTMLDivElement)[]>()
+const scrollerRef = ref<typeof ElScrollbar>()
+
+onMounted(() => {
+ watch(
+ () => [props.steps, activeItemRef.value, scrollerRef.value],
+ () => {
+ if (props.steps.length > 0 && activeItemRef.value?.length && scrollerRef?.value) {
+ console.log(scrollerRef?.value)
+ const left = props.active - 1 >= 0 ? activeItemRef.value[props.active - 1]?.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: 1;
+ flex-grow: 1;
+ flex-shrink: 0;
&:last-child {
flex-basis: auto !important;
flex-shrink: 0;
--
Gitblit v1.8.0