vue+js+css实现可左右移动横向时间轴

最新推荐文章于 2024-06-11 09:24:56 发布
置顶 最新推荐文章于 2024-06-11 09:24:56 发布
阅读量6.8k 收藏 21
点赞数 1
分类专栏： 工作中学习的前端开发知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41656025/article/details/103893502
版权

vue+js+css实现可左右移动横向时间轴

网上查了一圈都没有合适的组件实现横向时间轴，自己写了一个简单的。
实现功能如下图所示：
鼠标移到点上，颜色改变，显示tooltip信息，鼠标移开消失。
当数据少的时候可以全排列，根据自己的屏幕自由修改
在这里插入图片描述
当数据多的时候，可左右点击滑动查看，中间展示固定个数在这里插入图片描述
代码自取：https://github.com/zcl1111/timeLineCase

zcl_1
关注
  • 1
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
jvm的学习方法
qq_35657661的博客
11-08 3322
jvm详解欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdow...
Vue实现可移动水平时间轴
10-15
在Vue.js中实现一个可移动的水平时间轴是一项常见的需求，尤其在项目管理或数据分析的可视化应用中。本文将深入探讨如何使用Vue来创建这样一个功能丰富的组件。 首先，我们需要了解时间轴的基本结构。一个水平时间...
vue实现横向时间轴，并实现右滑加载数据
最新发布
weixin_46561899的博客
06-11 443
【代码】vue实现横向时间轴，并实现右滑加载数据。
uni——月份选择（横向滑动tab,横向滚动选择日期）vue2、vue3
努力、拼搏、奋进
08-09 1411
uni——月份选择（横向滑动tab,横向滚动选择日期）
Algebra, Topology, Differential Calculus, and Optimization Theory For Computer Science and Machine Learning - 2019 (math-deep)-计算机科学
04-22
Algebra, Topology, Differential Calculus, and Optimization TheoryFor Computer Science and Machine LearningJean Gallier and Jocelyn Quaintance Department of Computer and Information ScienceUniversity of Pennsylvania Philadelphia, PA 19104, USA e-mail: jean@cis.upenn.educ:copyright: Jean GallierAugust 2, 20192ContentsContents 31 Introduction 172 Groups, Rings, and Fields 19 2.1 Groups, Subgroups, Cosets . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.2 Cyclic Groups . . . . . . . . . .
IDEA--JetBrains IDE Support 调试工具
灵熙云工作室
11-09 1万+
直接在idea中打断点调试前端代码，解决在浏览器中调试前端代码的不便 1、在Chrome 浏览器地址栏中输入 chrome://extensions/ 2、把JetBrains IDE Support Chrome_2_0_7_.crx插件拖放到打开的页面中（附件：JetBrains IDE Support Chrome_2_0_7_.crx） 3、更改端口（idea 和 JetBrains...
'umi' 不是内部或外部命令
编程者说的博客专栏
10-22 7068
1.首先，需要安装Node.js（一路下一步安装），并确保 node 版本是 8.10 或以上。（mac 下推荐使用nvm来管理 node 版本） 安装完成后，通过node -v 命令查看其版本号 2.推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。 3.然后全局安装 umi，并确保版本是 2.0.0 或以上。 4.如何出现'umi' 不是...
'umi' 不是内部或外部命令，也不是可运行的程序 或批处理文件
枸杞泡茶的博客
01-31 1万+
出现这种错误,如果你的node.js以及umi是确认安装成功的情况下的话,那或许是umi的环境变量无法找到 可以通过下面的方式去解决 1. 获取全局路径 yarn global bin 2. 将该路径加入到环境变量当中即可 ...
vue.js响应式时间轴特效
04-02
为了实现垂直滑动的效果，开发者可能使用CSS3的`transform`和`transition`属性，结合Vue.js的事件监听器，当用户滚动时触发相应动画，使时间轴项平滑地上下移动。 至于压缩包中的“jiaoben7367”，这可能是指项目的...
一款基于vuejs的漂亮的时间轴组件
11-17
总的来说，"vue-cute-timeline"是一款专为Vue.js开发者设计的美观且功能丰富的组件，它简化了时间轴功能的实现，同时也提供了高度的可定制性和良好的兼容性，有助于提升项目的用户体验和开发效率。
vuejsTime横向时间年月日星期插件
04-17
在这个"vuejsTime横向时间年月日星期插件"中，我们讨论的是如何在Vue.js项目中实现一个能够展示横向时间轴，包含年、月、日和星期的功能。 首先，我们需要理解这个插件的核心功能。横向时间轴通常用于展示时间序列...
拖拽时间轴
08-13
3. **JavaScript事件处理**：在JavaScript中，我们需要为时间轴上的每个可拖动节点添加事件监听器。首先，`mousedown`事件开始拖动操作，记录下初始鼠标位置和时间点的原始位置。然后，`mousemove`事件在鼠标移动时...
JetBrains IDE Support的安装
weixin_42504805的博客
03-16 1098
JetBrains IDE Support的安装
'umi' 不是内部或外部命令，也不是可运行的程序 或批处理文件或umi: command not found
热门推荐
Gblfy_Blog
12-13 3万+
1.#首先，需要安装Node.js （一路下一步安装），并确保 node 版本是 8.10 或以上。（mac 下推荐使用 nvm 来管理 node 版本） #安装完成后，通过node -v 命令查看其版本号 node -v 2.推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。 npm i yarn tyarn -g tyarn -v 3.然后全局安装 umi，...
‘umi‘ 不是内部或外部命令，也不是可运行的程序 umi: command not found
wlm123565的博客
08-21 4959
前述： 使用 Visual Studio Code 运行 react 项目。 步骤： 1、将你的项目放入你的工作文件夹中。 2、在 Visual Studio Code 中打开项目。 3、在命令行输入 yarn start:dev 如果没有报错，那么恭喜你，你的电脑上有前辈装好的各种配置。当然这种可能几乎是零，还是乖乖自己配吧。 4、安装yarn npm inst...
解决‘umi‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件或umi: command not found
weixin_43049347的博客
04-27 6122
1.首先确定是否安装了node.js和yarn 2.如果上面两个都装了，下面开始安装umi yarn global add umi 查看umi版本 umi -v 3.添加环境变量 （1）在命令行中输入yarn global bin，查看yarn全局路径，路径如下： （2）将其添加进环境变量 4.yarn start重启服务,成功 ...
‘UMI_ENV‘不是内部或外部命令，也不是可运行的程序或批处理文件。
baist_5的博客
06-14 1010
'UMI_ENV'不是内部或外部命令，也不是可运行的程序或批处理文件。
解决umi 不是内部或外部命令，也不是可运行程序问题
calm_encode的博客
07-28 9451
一 UmiJS安装 安装Node.js，使用node -v命令检测安装结果 安装yarn，其中tyarn使用的是npm.tao.bao.org的源，速度比较快，其实可以将yarn看作为优化后的npm npm i yarn tyarn -g #-g 是指全局安装 tyarn -v 测试安装结果，正常输出版本信息即为安装成功 安装umi tyarn global add umi //安装umi umi //安装测试 二 解决umi 不是内部或外部命令，也不是可运行程序问题 使用命令查看ya
vue3+ts+vite怎么实现postcss适配
11-04
在Vue3 + TypeScript + Vite中实现PostCSS适配，可以按照以下步骤进行操作： 1. 在根目录下创建postcss.config.js文件，并编写以下代码： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.no__rem'] // 过滤掉.no__rem-开头的class，不进行rem转换处理 } } } ``` 2. 在工具类文件中新建rem.js文件，编写以下代码： ```javascript // 设置基础根文件大小 let baseSize = 37.5 // rem 函数 function setRem () { // 设计稿一般都是以375的宽度 const scale = document.documentElement.clientWidth / 375 // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整） document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // 调用方法 setRem() // 监听窗口在变化时重新设置跟文件大小 window.onresize = function () { setRem() } ``` 3. 在main.ts文件中引入rem.js方法： ```javascript import './utils/rem' ``` 4. 安装postcss-pxtorem和lib-flexible插件依赖： ```bash cnpm/ npm / yarn install postcss-pxtorem@5.1.1 --save-dev cnpm/ npm / yarn install lib-flexible --save ``` 相关问题：

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值