vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条

2024-01-04 10:20
文章标签 javascript 实现 步骤 vue 时间 frontend 任务 拐弯 弯曲

本文主要是介绍vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：

实现可拐弯的步骤条功能

实现后效果如下：

在这里插入图片描述

代码部分：

  1. 创建步骤条组件Steps.vue
<template><div><divstyle="width: 100%; display: flex; position: relative; margin-top: 20px"><div style="width: 2%; margin-left: 30px"><div><spandata-v-jzl20210826=""style="margin-top: 35px; opacity: 0"class="headerRadio"></span><div v-if="experienceData.length > Index"><spanv-for="(num, index) in leftRows":key="index"class="hingelisHeard"style="margin-top: 55px"></span></div><spandata-v-jzl20210826=""v-if="leftShow"style="margin-top: 98.5px; opacity: 0"class="hingeorgerHeard"></span></div></div><div style="width: 96%"><divstyle="display: flex"v-for="(item, index) in experienceData":key="index"><div style="display: flex; width: 100%" v-if="(index + 1) % 2 != 0"><divclass="timeline"v-for="(v, i) in DisplayProcessing(experienceData, index + 1)":key="i":style="(i + 1) % Index != 0 ? '' : 'width: 12%;'"><div class="Nodes"><SvgIcon name="ele-Microphone" :size="20" style="color: #f56c6c" /></div><div class="timeNodes"><div class="nodeTimes"><span>{{ v.createTime }} </span></div><div class="timeContent"><el-tooltipclass="item"effect="dark":content="v.content"placement="right"><pclass="nodeTimelis"@click="onClickDate(v.createTime, term)"><span v-if="v.status === 0" style="color: #409eff">{{ v.content }}</span><span v-else-if="v.status === 1" style="color: #42a51a">{{ v.content }}</span><span v-else style="color: #6b7280c2">{{ v.content }}</span></p></el-tooltip></div></div><divclass="border"v-if="(i + 1) % Index != 0 &&i != DisplayProcessing(experienceData, index + 1).length - 1"><div class="borderTime"></div></div></div></div><div style="display: flex; width: 100%" v-else><divclass="timeline2"v-for="(v, i) in DisplayProcessing(experienceData, index + 1)":key="i":style="i + 1 == 1 &&DisplayProcessing(experienceData, index + 1).length != 1? 'width: 12%;': ''"><div class="border" v-if="i != 0"><div class="borderTime"></div></div><div class="Nodes"><SvgIcon name="ele-Microphone" :size="20" style="color: #f56c6c" /></div><div class="timeNodes"><div class="nodeTimes"><span>{{ v.createTime }} </span></div><div class="timeContent"><el-tooltipclass="item"effect="dark":content="v.content"placement="right"><pclass="nodeTimelis"@click="onClickDate(v.createTime, term)"><span v-if="v.status === 0" style="color: #409eff">{{ v.content }}</span><span v-else-if="v.status === 1" style="color: #42a51a">{{ v.content }}</span><span v-else style="color: #6b7280c2">{{ v.content }}</span></p></el-tooltip></div></div></div></div></div></div><div style="width: 2%; margin-right: 30px"><div><span class="hingelis" v-if="experienceData.length > Index"></span><div v-if="experienceData.length > Index * 2"><spanclass="hingelis"v-for="(num, index) in rightRows":key="index"style="margin-top: 60px"></span></div></div></div></div></div>
</template>
<script>
export default {props: {data: {type: Array,default: () => {return [];},},Index: {type: Number,default: 0,}, //第一行展示X条数据},data() {return {experienceData: this.data,leftRows: 0,rightRows: 0,leftShow: false,rightShow: false,// pdfImg: require("../../assets/images/pdfReported.png"), //在下方展示的图片};},watch: {data: {handler(newVal, oldVal) {//时间线数据this.experienceData = newVal;let rows = Math.ceil(newVal.length / this.Index);this.leftRows =rows == 2? 0: rows % 2 == 0? parseInt(rows / 2) - 1: parseInt(rows / 2);this.rightRows =rows == 4? 1: rows % 2 == 0? parseInt(rows / 2) % 2 == 0? parseInt(rows / 2) >= 4? parseInt(rows / 2) - 1: parseInt(rows / 2): parseInt(rows / 2) - 1: parseInt(rows / 2) - 1;this.leftShow = rows % 2 == 0 ? true : false;this.rightShow = rows == 1 ? false : rows % 2 == 1 ? true : false;},immediate: true,},},created() {},methods: {DisplayProcessing(Arg, Num) {//数据循环处理let arr = Arg.slice(this.Index * (Num - 1), this.Index * Num);arr = Num % 2 == 0 ? arr.reverse() : arr;return arr;},onClickDate(date, term) {//选择报告this.$emit("onClickDate", term);},},
};
</script>
<style scoped lang="scss">
.timeline {width: 100%;height: 60px;display: flex;align-items: center;
}
.timeline2 {width: 100%;height: 60px;display: flex;align-items: center;justify-content: flex-end;
}
.border {width: 100%;justify-content: center;align-items: center;display: flex;.borderTime {border-bottom: 2px solid #9cd3ff;width: 100%;}
}.Nodes {svg {// background: ;color: #1e9bff;height: 1.5em;width: 1.5em;}
}.timeNodes {display: flex;flex-wrap: wrap;align-items: center;max-width: 135px;
}.nodeTimelis {max-width: 150px;overflow: hidden;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;
}
.nodeTimelis:active {color: #1e9bff;
}
.nodeTimes {margin-bottom: 0;
}.btns-img {height: 16px;width: 16px;
}.hingelis {content: "";display: block;width: 100%;height: 60px;border: 2px solid #9cd3ff;border-radius: 0 20px 20px 0px;border-left: 0px;margin-top: 29.5px;
}.hingelisHeard {content: "";display: block;width: 100%;height: 63.1px;border: 2px solid #9cd3ff;border-radius: 20px 0px 0px 20px;border-right: 0px;margin-top: 50px;
}.hingeorger {display: block;width: 100%;border-bottom: 1px solid #cccccc;margin: 49.5px 0;position: relative;
}
.hingeorgerHeard {display: block;width: 100%;border-bottom: 1px solid #cccccc;position: relative;
}.hingeorgerHeard[data-v-jzl20210826]:after {content: "";position: absolute;top: -4px;left: -2px;border-top: 5px solid transparent;border-right: 12px solid #cccccc;border-bottom: 5px solid transparent;
}.hingeorger[data-v-jzl20210826]:after {content: "";position: absolute;top: -4px;right: -2px;border-top: 5px solid transparent;border-left: 12px solid #cccccc;border-bottom: 5px solid transparent;
}.headerRadio {display: block;width: 100%;border-bottom: 1px solid #cccccc;position: relative;
}.headerRadio[data-v-jzl20210826]:after {content: "";position: absolute;top: -4px;left: -2px;width: 1px;height: 1px;border-radius: 50%;background: #cccccc;border: 5px solid #cccccc;position: absolute;right: 35px;top: 50%;transform: translate(0, -50%);
}
::-webkit-scrollbar {width: 3px;height: 3px;
}::-webkit-scrollbar-thumb {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background-color: #99a9bf;
}::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);border-radius: 5px;background-color: #d3dce6;
}
</style>
  1. 在使用的页面引入Steps组件，并传入相关数据
<template><div class="content_box"><Steps v-if="dayRecory.length > 0" :data="dayRecory" :Index="5" /></div>
</template><script>
import { reactive, toRefs } from 'vue';
import Steps from './components/Steps/index.vue';
export default {components: { Steps },props: {},setup() {const state = reactive({dayRecory: [{id: 7204928,content: "步骤1",smallClass: "UpdateOutBoundAgingPlanning",bigClass: null,createTime: "2024-01-03",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤2",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-01-04",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤3",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-01-05",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤4",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤5",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤6",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤7",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤8",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤9",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 0},{id: 7204929,content: "步骤10",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 1},{id: 7204929,content: "步骤11",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 2},{id: 7204929,content: "步骤12",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 2},{id: 7204929,content: "步骤13",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 2},{id: 7204929,content: "步骤14",smallClass: "UpdateOutBoundAgingPlanning",bigClass: "SCFXD",createTime: "2024-03-01",createUser: "Mia",outBoundAgingPlanningId: 1342,status: 2}],});const methods = {};return {...toRefs(state),...methods};},
};
</script><style scoped lang="scss">
.main-container {margin-left: 0 !important;
}
::v-deep .right-toolbar {width: 800px !important;
}
::v-deep .main-title {display: none !important;
}
</style>

这篇关于vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/569011。

相关文章

C++中unordered_set哈希集合的实现

C++中unordered_set哈希集合的实现

《C++中unordered_set哈希集合的实现》std::unordered_set是C++标准库中的无序关联容器,基于哈希表实现,具有元素唯一性和无序性特点,本文就来详细的介绍一下unorder... 目录一、概述二、头文件与命名空间三、常用方法与示例1. 构造与析构2. 迭代器与遍历3. 容量相关4
阅读更多...
C++中悬垂引用(Dangling Reference) 的实现

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量，变量超出作用域后销毁2. 引用绑定到动态分配的对象，对象
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...
Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
Python实现字典转字符串的五种方法

Python实现字典转字符串的五种方法

《Python实现字典转字符串的五种方法》本文介绍了在Python中如何将字典数据结构转换为字符串格式的多种方法,首先可以通过内置的str()函数进行简单转换;其次利用ison.dumps()函数能够... 目录1、使用json模块的dumps方法：2、使用str方法：3、使用循环和字符串拼接：4、使用字符
阅读更多...
Linux云服务器手动配置DNS的方法步骤

Linux云服务器手动配置DNS的方法步骤

《Linux云服务器手动配置DNS的方法步骤》在Linux云服务器上手动配置DNS（域名系统）是确保服务器能够正常解析域名的重要步骤,以下是详细的配置方法,包括系统文件的修改和常见问题的解决方案,需要... 目录1. 为什么需要手动配置 DNS？2. 手动配置 DNS 的方法方法 1：修改 /etc/res
阅读更多...
Linux下利用select实现串口数据读取过程

Linux下利用select实现串口数据读取过程

《Linux下利用select实现串口数据读取过程》文章介绍Linux中使用select、poll或epoll实现串口数据读取,通过I/O多路复用机制在数据到达时触发读取,避免持续轮询,示例代码展示设... 目录示例代码（使用select实现）代码解释总结在 linux 系统里，我们可以借助 select、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2