企业级时间轴插件Vue-timelinepick
简介
时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类
在线演示及下载
在线演示:https://yelingfeng.github.io/vue-timelinepick/
本地下载
依赖
- jquery
- d3
- createjs
- tweenMax
使用方法
引入依赖文件
import timelinepick from "vue-timelinepick"
import "vue-timelinepick/dist/vue-timelinepick.css"
Vue.use(timelinpick)
vue组件中直接使用
<timelinepick :option="op" :width="width" :height="height" :handler="changeAction"></timelinepick>
data() {
return {
"width": 1200,
"height":110,
"op" : {
"threshold": new Date(),
"number": 97,
"spanMinNumber": 10,
"isFixedDrag" : true,
"spanIndex": {start: 70, end: 97},
"type": "quarter",
"dateFormat" : 'yyyy-MM-dd mm:hh:ss'
}
}
},
methods:{
changeAction(e){
this.startTime = e.startTime;
this.endTime = e.endTime;
}
}
属性
属性 | 说明 |
---|---|
width | 宽 |
height | 高 |
option | 配置项 |
方法
属性 | 说明 |
---|---|
threshold | 起点时间(默认当前) new Date() |
number | 总刻度 97 |
isFixedDrag | 是否禁止拖拽 false |
spanIndex | 起始滑块范围 {start: 70, end: 97} |
type | 刻度类型 "quarter" |
dateFormat | 格式 'yyyy-MM-dd mm:hh:ss' |
企业级时间轴插件Vue-timelinepick的更多相关文章
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- jQuery时间轴插件:jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- 看看我做的一款 时间轴 插件 timegliderJs
TimegliderJs 是一款基于jQuery的时间轴插件.完成后效果. 介绍 Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及 ...
- 使用canvas编写时间轴插件
使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- jQ效果:jQuery时间轴插件jQuery Timelinr
前言 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚动.支持键盘方向键.经过扩展后可以支持鼠标滚轮事件. ...
- 推荐5款实用的jQuery时间轴插件
1.使用CSS3和jQuery制作的水平时间轴 这是一个可以在PC和移动端表现非常棒的水平时间轴,它由上部水平滑块和下部时间点对应的内容区块,点击时间轴上的时间点,下部内容会滑动到对应的内容区块.使用 ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
随机推荐
- 小程序viewflex布局的对齐不对的问题
index.wxml: <view class="container"> <view class="nav-container"> &l ...
- 【剑指Offer】41、和为S的连续正数序列
题目描述: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数). ...
- 记一次获得 3 倍性能的 go 程序优化实践,及 on-cpu / off-cpu 火焰图的使用
转自:https://mp.weixin.qq.com/s/9IKaXeWTiiQTFlvZzxgsEA 记一次获得 3 倍性能的 go 程序优化实践,及 on-cpu / off-cpu 火焰图的使 ...
- 洛谷P1057 传球游戏【递归+搜索】
上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:nn个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同学可以把 ...
- [luogu1034] 矩形覆盖 (暴力)
传送门 Description 给n(n<=50)个点(x,y),要求用k(1<=k<=4)个没有联系的矩形覆盖住求矩形最小面积 Solution 感觉不是很可做,结果看TJ后发现数 ...
- Java代码模拟http请求的两种方式
z这里用百度地图的逆地理编码接口为例, 第一种方式:(通过jdk中的java.net包) 引入工具类 import java.net.URL; import java.net.URLConnectio ...
- TortoiseGit生成PuttyKey与GitHub的SSH进行关联
1.打开Puttygen 要到进度条满格为止,知道出现如下界面: 把上面的Key复制. 最后点击[Save private key]保存. 2.登录GitHub进行如下操作: Settings-> ...
- Go在Ubuntu 14.04 64位上的安装过程
1. 从 https://golang.org/dl/ 或 https://studygolang.com/dl 下载最新的发布版本go1.10即go1.10.linux-amd64.tar.gz ...
- Spring技术内幕:SpringIOC原理学习总结
前一段时候我把Spring技术内幕的关于IOC原理一章看完,感觉代码太多,不好掌握,我特意又各方搜集了一些关于IOC原理的资料,特加深一下印象,以便真正掌握IOC的原理. IOC的思想是:Spring ...
- _DataStructure_C_Impl:基数排序
#include<stdio.h> #include<stdlib.h> #include<math.h> #include<string.h> #de ...