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

最新推荐文章于 2024-06-06 10:30:59 发布
最新推荐文章于 2024-06-06 10:30:59 发布
阅读量1.4k 收藏 16
点赞数 8
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44552416/article/details/135370899
版权

需求：

实现可拐弯的步骤条功能

实现后效果如下：

在这里插入图片描述

代码部分：

  1. 创建步骤条组件Steps.vue
<template>
	<div>
		<div
			style="width: 100%; display: flex; position: relative; margin-top: 20px"
		>
			<div style="width: 2%; margin-left: 30px">
				<div>
					<span
						data-v-jzl20210826=""
						style="margin-top: 35px; opacity: 0"
						class="headerRadio"
					></span>
 
					<div v-if="experienceData.length > Index">
						<span
							v-for="(num, index) in leftRows"
							:key="index"
							class="hingelisHeard"
							style="margin-top: 55px"
						></span>
					</div>
					<span
						data-v-jzl20210826=""
						v-if="leftShow"
						style="margin-top: 98.5px; opacity: 0"
						class="hingeorgerHeard"
					></span>
				</div>
			</div>
			<div style="width: 96%">
				<div
					style="display: flex"
					v-for="(item, index) in experienceData"
					:key="index"
				>
					<div style="display: flex; width: 100%" v-if="(index + 1) % 2 != 0">
						<div
							class="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-tooltip
										class="item"
										effect="dark"
										:content="v.content"
										placement="right"
									>
										<p
											class="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
								class="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>
						<div
							class="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-tooltip
										class="item"
										effect="dark"
										:content="v.content"
										placement="right"
									>
										<p
											class="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">
						<span
							class="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>
SwJieJie
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+elementUI实现时间线的自定义显示.zip
04-22
1、清晰的效果图； 2、完整的源代码以及详细的说明
VUE-任务进程（时间轴）
10-09
公司提出一个需求，要求写一个任务进程组件用于监控工作时间内任务完成情况。包括任务状态，任务起止时间，当前时间线，任务是否延迟开始。 压缩包中不包含node_modules,请下载后自行安装相关插件
拐弯的时间线
最新发布
qq_40295815的博客
06-06 101
【代码】拐弯的时间线。
Vue实现可移动水平时间轴
10-15
主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现购物车抛物线小球动画效果的方法详解
10-17
主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下
实现会拐弯的时间轴
Kate_sicheng的博客
12-19 2654
纯css实现会拐弯且能自适应屏幕宽度的时间轴。
vue+el-timeline组件：打造动态表格时间线的新利器
Shids_的博客
09-01 1万+
vue+el-timeline组件：打造动态表格时间线的新利器
vue 实现可以转弯的步骤条
weixin_46328739的博客
06-01 2803
会拐弯的步骤条效果如下。
vue 时间线组件（时间轴组件）
热门推荐
qq_32886245的博客
10-09 2万+
效果 vue-时间线组件（时间轴组件）代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <div class="out-circle">
Vue2_时间线-流程审批
Rainbow_bead的博客
11-06 4406
时间线-流程审批
Vue2时间轴（Timeline）
Mr Dear的博客
10-15 1万+
自定义设置时间轴的宽度（width）和描述文本
vue实现折线图 可按时间查询
10-14
在本文中，我们将探讨如何使用Vue.js框架实现一个动态的、可以根据时间查询的折线图。这个功能对于数据分析和展示非常有用，特别是当需要展示随时间变化的趋势数据时。我们将从以下几个方面详细介绍实现过程： 1. *...
vue项目开发自定义步骤条，自定义高亮
weixin_39277183的博客
12-30 1313
项目开发过程中很多时候element的UI组件和实际项目的需求有一样，不能直接服用，我这里是自定义实现步骤条方式 下面直接展示代码（代码已经有所修改，但是结构没变） <template> <div class="ul_box"> <ul class="timeline" ref="mytimeline" style="margin-left: 10px;"> <li class="tim.
vue2 使用组件 实现步骤条
promise466的博客
02-16 1107
本案例纯属练习vue组件参考，实际工作中为提高效率此类组件都是直接引用。（代码部分有部分注释，有不理解的可以留言哦）
vue自定义步骤行程条
weixin_47886687的博客
03-31 672
<template> <div> <div class=" steps"> <div class=" stepsRightBox"> <!-- 跟随的样式 --> <div class="stepsLine"> <!-- 圆点,可以改为图片 --> <i></i> <!-- 虚线,
vue时间线+任务信息显示
weixin_59681643的博客
08-03 914
vue时间线+任务信息显示
Vue之时间轴组件
weixin_30500473的博客
02-13 6026
github地址：https://github.com/SunshineMibai/vue-timeline 实现思路及步骤： 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧时间固定宽度，显示时间（本demo:100px）,之后absolute绝对定位（left:0） 中间圆点ab...
Vue3时间轴（Timeline）
Mr Dear的博客
04-18 5847
垂直展示的时间流信息组件，可自定义设置内容描述和圆圈样式。
Vue学习篇3_自定义时间线timeline
xiaosi的博客
08-13 5044
1.效果展示 2.代码 实现 父页面 子页面timeline.vue 子页面card.vue 父页面 <div v-for="(v, i) in uni_data" :key="'id' + i" class="year-item"> <timeline :time-data="v"> <template slot="cardSlot" slot-scope="scope"> <!--这里采用作用域
vue3 timeline 时间线实现会拐弯的时间轴
10-10
Vue3 Timeline 时间线实现会拐弯的时间轴相对于普通的时间线来说更加有趣和独特。在实现这种时间轴时，我们可以使用 Vue3 的组件化开发方式来创建一个可重复使用的时间线组件。 首先，我们需要创建一个 TimeNode（时间节点）组件，用来表示每个时间点。我们可以为每个节点设置一个时间和一个事件描述。时间节点可以通过计算属性或者接收传递的属性来设定其位置。 接下来，在时间线组件中，我们需要创建一个数组来存储时间节点。我们可以使用 v-for 指令来遍历这个数组，并将每个时间节点渲染到视图中。 然后，我们可以使用 CSS 来为时间节点添加样式，使其能够正确地显示出拐弯的效果。我们可以为时间节点设置不同的样式类，然后在 CSS 中定义这些样式类的样式规则，来实现时间轴的拐弯效果。 最后，我们可以根据时间节点的数量和位置，计算出时间轴的长度和位置，然后通过 CSS 来设置时间轴的样式，使其正确地显示出拐弯的时间轴效果。 通过以上的步骤，我们就可以实现一个拐弯的时间轴组件。这个组件可以根据需要接收传递的属性，可以根据时间节点的数量和位置来自动计算出时间轴的样式，使其能够正确地显示出拐弯的效果。 总之，Vue3 Timeline 时间线实现会拐弯的时间轴，通过使用 Vue3 的组件化开发方式，结合计算属性、遍历数组、添加样式和计算位置等技巧，可以比较容易地实现出一个有趣和独特的时间轴组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值