vue3 - 【完整源码】实现垂直时间轴组件，类似快递物流的纵向排列的时间线，支持自定义线条样式、字体颜色、前缀图标等等（无任何第三方依赖，详细示例代码及注释，一键复制开箱即用）

已于 2024-02-03 17:20:11 修改
阅读量5.5k 收藏 4
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue3时间线 vue3时间轴组件源码 vue3类似快递物流的时间节点 vue3实现纵向排列时间线插件 vue3比较好用的时间轴插件
于 2023-05-10 22:01:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130610488
版权

效果图

在 vue3.js 项目中，完成一个时间轴组件，像快递物流一样的时间线，可以随意自定义样式！

无任何第三方插件依赖，详细的示例及注释，轻松一键复制组件源码开箱即用！

在这里插入图片描述

组件源码

建立一个 Timeline.vue 文件，一键复制以下代码。

<script setup
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
【前端】vue-slider实现可设置选择范围的时间轴
洛尧的博客
11-23 4356
一开始用的el-slider，提了这个需求以后开始查文档改，到最后发现，element的slider居然可以样式和绑定的value不一致。最后看到了vue-slider的范围模式，实现了设置不可选范围，将时间轴分两段。加cursor: auto;屏蔽固定滑块的cursor:not-allowed，不显示禁止符号。截图截不到第二个滑块上大大的 cursor: not-allowed 标志。绝不会超过设定值，使用键盘左右键也不会超过，点图标右回到1。
VUE + element实现横向及纵向拓展
11-03
利用VUE和elementUI实现table表格的横向及总想拓展。可以根据按钮选择展开层级。
一款基于vuejs的漂亮的时间轴
吴秋华的ＣＳＤＮ
11-17 1719
一款基于vuejs的漂亮的时间轴
【VUE项目实战】59、订单的物流信息查询功能
程序猿之洞
07-10 4405
接上篇《58、订单修改收货地址的功能》 上一篇我们完成了订单列表的修改收货地址功能，本篇我们来实现订单的物流信息查询功能。我们要实现点击操作列的“物流进度”绿色按钮，弹出该订单的物流信息记录，并以时间轴的形式显示出来： 我们来实现点击“物流进度”绿色按钮弹出物流信息对话框的效果，首先为“物流进度”按钮绑定一个名为“showProgressBox”的click点击事件： 然后在div的内部最后添加物流信息的对话框逻辑： 然后在数据区域定义progressVisible显示属性，默认为false不显示；
探索时间的脉络：Vue.js下的Timeline组件——Timeline Vuejs
最新发布
gitblog_00081的博客
06-22 880
探索时间的脉络：Vue.js下的Timeline组件——Timeline Vuejs 项目地址:https://gitcode.com/pablosirera/timeline-vuejs 在数字时代，将信息以时间轴的形式展示变得日益重要，它帮助我们清晰地追踪事件的发展和变迁。今天，我们要推荐一个精巧且功能强大的Vue.js组件——Timeline Vuejs。这款开源项目专为Vue爱好者设计，旨...
vue 物流时间轴
小妹的博客
03-12 2239
son组件 <template> <div class="steps-wrap"> <ul> <li v-for="(item,index) in steps" :key="index"> <span class="time">{{item.time}}</span> &...
Vue3时间轴（Timeline）
Mr Dear的博客
04-18 5890
垂直展示的时间流信息组件，可自定义设置内容描述和圆圈样式。
可拖动的时间轴(vue3+ts使用element-plus的Slider滑块封装)
weixin_60886885的博客
06-14 3486
图一： 图二：HTML代码如下： 封装组件，后端传递开始时间和结束时间，前端算出中间相差多少天 图一效果：后端只传了一个开始时间和结束时间 图二效果：后端传了一个时间数组，包含了一段时间（只需要将图一的getDaysArr 的获取时间段的行为改为时间数组；props默认开始时间和默认结束时间改为时间数组的第一位和最后一位即可，以下代码是一个简单的示例） 封装计算开始时间与结束时间之间的天数，以及数组转对象的方法 新建calculatetime方法文件，写入以下代码 在父组件调用封装的时间
vue+el-timeline组件：打造动态表格时间线的新利器
Shids_的博客
09-01 1万+
vue+el-timeline组件：打造动态表格时间线的新利器
vue x轴文字纵向显示 - echart图表
你好！刘斩仙
09-13 536
介绍： 实现 如图所示： 代码如下： <template> <div class="ml20 mr20 mb20 colorFOp"> <div class="head tc mb20 ">测试案例</div> <div ref="test" class="testChart"></div> </div> </template> <script> import * as
vue3编写时间轴
半盏清茶，一杯浊酒
04-13 1056
一、页面样式 二、代码实现 <!-- * @Author: Varian LIn * @Date: 2022-04-01 15:04:15 * @LastEditors: coco * @LastEditTime: 2022-04-06 17:33:28 * @Description: --> <template> <div class="date-pick"> <div class="header"> <p
Vue如何实现时间轴
Alone_Endeavor的博客
06-01 2795
该时间轴展示的是每条工程数据的鸟瞰图，照片可多张，利用el-carousel、el-image-viewer插件，走马灯效果，可图片预览；该时间轴每页最多默认展示三条数据，根据后台数据而定，超过三条前端分页处理；
Vue实现可移动水平时间轴
10-15
主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue时间线组件
m0_49062914的博客
12-07 937
vue 自己封装时间线组件
移动端时间线的数据实现
weixin_46189889的博客
08-31 516
文章目录1、目标效果2、请求数据一般格式3、将请求到的数据进行处理4、解决方案（使用计算属性）总结 1、目标效果 2、请求数据一般格式 3、将请求到的数据进行处理 （1）根据时间进行渲染，每一个时间中有多项，则需要进行两次v-for循环 （2）每一天的数据应是一个{日期: 当天学习数据数组}，因此将list设置为对象，键名为日期，具体的数据为数组 （3）这样写的结果是页面什么都不显示（我也不知道为什么），但是显示list已经是我们想要的数据结构 new Vue({ el: '#app',
VUE2中做一个类似于jQuery拖动时间轴的组件
qq_45599738的博客
08-18 2585
jQuery拖动时间轴的演示地址 https://www.jq22.com/yanshi20974此处是我已经实现了的全部功能，诸君直接可以用，但是会有一个非常严重的性能问题要和诸君提前说一下。 在JQ的演示中不管创建多少个滑块浏览器都不会掉帧，滑动也非常顺畅，但是在vue项目中当滑块变多后会导致浏览器严重的掉帧问题，CPU占用率也会飙升，初步判断是因为vue是用数据驱动虚拟DOM而我其中是的操作是大量的DOM操作导致的，如果诸君在使用过程中改善了其性能请留言分享，在下感激不尽。 话不多说，上代码。类似$t
vue-cli3.0移动端使用的时间轴效果
浩星
11-01 2640
前言： 我们使用element或者iview时会发现框架中就有时间轴的效果，但是我在mint-ui中是没有找到该效果，但是实际项目又是需要，所以引入了一个时间轴插件vue-cute-timeline，在这里记录一下 实现效果： 步骤： 第一：下载插件 npm i vue-cute-timeline 第二：timeline.vue组件 <template...
Vue.js 实现时间轴功能
qq_37236395的博客
11-28 5407
GitHub 时间轴组件封装 Main.js <template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key="index"> <div class="axis-item-tick" .
Vue 时间插件 moment 使用
热门推荐
grootbaby
06-22 1万+
this.$moment().subtract(10,'days').format("YYYY-MM-DD");//当前时间往后推10天。this.$moment(value).format("YYYY-MM-DD")//格式化指定日期value的格式年-月-日。()//获取当前月第一天是星期几this.$moment().format('MM')//获取当前月份。this.$moment().format("YYYY-MM-DD")//获取当前日期。...
给一个Vue3 + 调用Vue-iClient-MapboxGL中时间轴组件的代码示例，包括main.js配置
07-15
当你想要在Vue3中使用Vue-iClient-MapboxGL插件的时间轴组件时，你需要进行一些配置。以下是一个包括main.js配置的示例代码： 首先，确保你已经安装了Vue-iClient-MapboxGL插件的依赖。 在main.js中，你需要引入Vue-iClient-MapboxGL插件和时间轴组件： ```javascript import { createApp } from 'vue'; import iClientMapboxgl from '@supermap/vue-iclient-mapboxgl'; import '@supermap/vue-iclient-mapboxgl/dist/styles.css'; import App from './App.vue'; const app = createApp(App); // 注册Vue-iClient-MapboxGL插件 app.use(iClientMapboxgl); app.mount('#app'); ``` 接下来，在你的Vue组件中，你可以使用时间轴组件： ```vue <template> <div> <mapbox-map :accessToken="accessToken" :style="mapStyle" :center="center" :zoom="zoom"> <timeline-control></timeline-control> </mapbox-map> </div> </template> <script> export default { data() { return { accessToken: 'your-mapbox-access-token', mapStyle: 'your-map-style', center: [lng, lat], zoom: 12 }; } } </script> ``` 在上面的代码中，你需要替换`your-mapbox-access-token`为你的Mapbox访问令牌，`your-map-style`为你的地图样式，以及根据需要设置地图的中心点和缩放级别。 通过这种方式，你可以在Vue3中使用Vue-iClient-MapboxGL插件的时间轴组件。记得替换你的Mapbox访问令牌和地图样式，以及根据需要自定义地图的中心点和缩放级别。希望对你有帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值