企业级时间轴插件Vue-timelinepick
简介
时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类
在线演示及下载
在线演示:https://yelingfeng.github.io/vue-timelinepick/
本地下载
依赖
- jquery <=2.x
- d3 < 4.x
- createjs
- tweenMax
使用方法
引入依赖文件
import timelinepick from "vue-timelinepick" import "vue-timelinepick/dist/vue-timelinepick.css" Vue.use(timelinpick)
vue组件中直接使用
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’ |
相关推荐
-
强大的jQuery图片查看器插件Viewer.js 插件应用
2017-5-20
-
tween.js 中文使用指南 插件应用
2018-1-6
-
轮播图插件slides.js使用方法及参数 插件应用
2017-6-3
-
Particleground粒子背景插件 插件应用
2017-12-12
-
轮播图FlexSlider插件使用方法及参数 插件应用
2017-6-3
-
前端开发者常用的 9 个 JavaScript 图表库 插件应用
2017-12-25
-
jQuery侧边导航插件SidebarJS 插件应用
2017-12-12
-
Intro.js 分步向导插件使用方法 插件应用
2017-6-3
-
如何写一个日历组件 插件应用
2017-12-10
-
liMarquee无缝滚动Jquery插件 插件应用
2017-6-23