vue2/3 - 最新详细实现横向时间轴 “上下交错排列“ 展示效果，vue时间线组件，周围的卡片介绍文字，均匀分布交叉排列在时间轴上，vue实现横向时间轴并在周围上下位置放容器和文字（详细示例代码）

于 2024-06-12 11:02:18 发布
阅读量3.7k 收藏 3
点赞数 8
分类专栏： 前端组件与功能(开箱即用) 文章标签： vue2.js vue3.js 横向时间线时间轴组件插件 每个时间节点上下都插入一些文字 双列左右布局卡片描述信息 时间轴上下交错排列展示效果功能 时间线交叉上下平均分布展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/139619447
版权

效果图

在vue2、vue3、nuxt网站项目开发中，详细完成时间轴时间线组件插件，在时间线 “一上一下” 排列卡片式容器描述信息，让时间轴的每个节点分布 “交错交叉” 进行文字信息或图文信息的展示效果，双列左右进行展示，支持自定义展示信息(可自由更改样式)、自定义线条颜色或高亮圈圈、时间轴左右滑动加载数据、可关闭左右点击滑动、自动适应宽高等功能。

提供详细示例代码及注释说明，新手小白直接复制稍微改改就能用了。

在这里插入图片描述

完整代码

如下代码所示，直接运行

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 8
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue实现横向时间轴组件
Mini_小仙女的博客
04-08 1万+
前言：项目中有需要用到横向时间轴，网上大部分组件不满足 功能需要，于是自己写了一个。先上简单的demo。 功能： 默认获取初始数据显示对应的时间轴和时间点。 当超出屏幕后，滑动滚动条加载更多页，类似分页加载。 某个大的时间轴节点鼠标放入需要显示相关信息。 某两个大节点之间会有子节点出现。 每个子节点会有对应的内容展示 ...
vue横向时间轴插件可拖动_Vue轮播图插件中的精品——Vue-Awesome-Swiper
weixin_29526767的博客
01-26 4726
介绍在Web网页开发中，我们经常需要用到图片轮播，在以往传统的开发方式中有很多基于jquery的插件可供使用，但是随着目前各类前端框架层出不穷的现状，在某些方面特别是针对特定的场景，还是有不少地方不太完善，今天就像大家介绍一个优雅的图片轮播插件——Vue-Awesome-Swiper，基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用，且可用于移动端和PC端。Github目...
vue-horizontal-timeline:只是使用Vue.js制作的一个简单的水平时间轴组件
04-28
Vue水平时间线 只是一个由Vue.js制作的简单水平时间轴组件。 演示版 故事书 前往 如何安装 npm $ npm install vue-horizontal-timeline --save 纱线（推荐） $ yarn add vue-horizontal-timeline 快速开始 Vue.js 您可以导入main.js文件 import Vue from "vue" ; import VueHorizontalTimeline from "vue-horizontal-timeline" ; Vue . use ( VueHorizontalTimeline ) ; 或本地任何组件 import { VueHorizontalTimeline } from "vue-horizontal-timeline" ; // In v0.8+ you don't need
Vue实现可移动水平时间轴
10-15
主要为大家详细介绍了Vue实现可移动水平时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
时间轴 - 基于vue2, 可以拖动和滚轮缩放
最新发布
z_blackbear的博客
05-31 887
说明：实现思路来源于上面的文档，在此基础上做了一些调整，以符合项目需求另外也可以去npm直接下载插件
Vue时间轴（横向）
Mr Dear的博客
04-08 1万+
支持初始选中年份和时间轴数据手动传入，自适应均匀排列，每个元素周围分配相同的空间
tree第三层节点横向排列.vue
06-18
这个是https://blog.csdn.net/qq_33769914/article/details/81562278?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159244480719724848325509%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=159244480719724848325509&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_blog_default-1-81562278.pc_v2_rank_blog_default&utm_term=element-ui+tree我这个文章的代码。下载了放在自己的vue项目中看结果吧
居中系列
qq_43618136的博客
11-09 185
水平居中 行内元素 text-align: center 块级元素 margin: 0 auto 或者 position: absolute; left: 50%; transform: translateX(-50%) 或者 display: flex justify-content: center 垂直居中 行级元素 line-height = height 块级元素 position: absolute top: 50% transform: translateY(-50%) 或者 di
Vue3实现横向交错时间轴组件
拓的博客
04-10 1089
Vue3实现横向交错时间轴组件
Vue中实现动态横向均匀排列块元素
胡海龙
03-12 4090
本文介绍了一种如何响应式的动态均匀排列元素，开发环境是Vue，支持元素随着屏幕的大小变化自动适应并均匀排列。
vue中利用flex布局实现横向时间轴简化
是日前端
10-28 4250
最终效果： 代码如下： <div class="timeline body-bgcolor"> <!--时间线--> <div class="timeline-title"> <span v-for="item in timeLineList" class="timeline-title-item">{{ item.title }}</span> </div>
VUE + element实现横向及纵向拓展
11-03
利用VUE和elementUI实现table表格的横向及总想拓展。可以根据按钮选择展开层级。
10款特别实用的时间轴插件
08-21
10款炫酷的时间轴demo：如我们将新闻之类的内容按照月份排列，形成了一个垂直的时间轴，当在宽大屏幕上，时间轴的事件是在轴的两侧排列，而在较小的屏幕如手机屏幕，时间轴的事件会排列在轴的一侧。当然时间轴事件内容支持任意html元素内容。
vuejsTime横向时间年月日星期插件
04-17
jq22vuejsTime横向时间年月日星期插件
vue-timeLine.vue
08-18
利用vue-element的步骤组件el-steps实现横向时间轴，实现点击时间轴的时间节点动态的加载订单数据列表进行展示
Vue 中使用vue2-highcharts实现曲线数据展示的方法
08-27
"Vue 中使用vue2-highcharts实现曲线数据展示的方法" 在本文中，我们将介绍如何使用Vue框架和vue2-highcharts库来实现曲线数据展示的方法。通过本文，读者可以学习如何使用vue2-highcharts来创建一个简单的曲线图表...
vue2-clock-picker:Vue 2.x组件插件，用于在`HH中选择时间
05-27
Vue2时钟选择器 vue v2.x一个简单的时钟选择器组件。 安装 $ npm install @pencilpix/vue2-clock-picker --save 或者 $ yarn add @pencilpix/vue2-clock-picker 在浏览器中： 通过插件 < link href =" node_...
横向上下交错时间线列表布局
HELLO WORD
10-10 905
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/ 分享一个横向上下交错时间线列表布局 完整代码 <template> <div class="timelineBox-wrap"> <div class="timelineBox" id="box"> <div class="timeline-up"> <div :cl.
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">
vue3 + @vuemap/vue-amap
11-18
@vuemap/vue-amap是一个Vue.js组件，用于在Vue.js应用程序中轻松使用高德地图API。以下是使用Vue3和@vuemap/vue-amap的简单示例： 1.首先，使用yarn或npm安装@vuemap/vue-amap： ```shell yarn add @vuemap/vue-amap ``` 2.在main.js中导入@vuemap/vue-amap并注册组件： ```javascript import { createApp } from 'vue' import App from './App.vue' import AMap from '@vuemap/vue-amap' const app = createApp(App) app.use(AMap) app.mount('#app') ``` 3.在组件中使用AMap组件： ```vue <template> <div> <amap-map :zoom="zoom" :center="center"> <amap-circle :center="center" :radius="1000" @click="cirClick"></amap-circle> </amap-map> </div> </template> <script> export default { data() { return { zoom: 13, center: [116.397428, 39.90923] } }, methods: { cirClick(e) { const { lng, lat } = e.lnglat this.$message.success(`您当前点击圆的经纬度是${lng},${lat}`) } } } </script> ``` 在上面的示例中，我们首先在main.js中导入@vuemap/vue-amap并将其注册为Vue应用程序的插件。然后，在组件中，我们使用amap-map和amap-circle组件来显示地图和圆。我们还定义了一个cirClick方法来处理圆的点击事件，并使用$message.success方法显示经纬度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值