vue-timeline
由于在vue没找到适合的插件,就自己封装了一个基于css3的
插件地址:click me!
预览
![small.png](http:https://img.haomeiwen.com/i3178153/9b89ffa883b01834.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)特性
- 响应式
- 鼠标移入时间点有回调事件
使用方法
- 引入components底下的timeLine 并绑定points属性
<timeLine :points="points"></timeLine>
- 配置每个时间点(可以缺少或不配置大部分选项)
points: [
{
pointColor: 'red', // important! the color of every time point and you can use red yellow or green *关键点颜色 可选red yellow green
img: 'http://www.jikexueyuan.com/event/static/images/bootstrap/bootstrap-logo.png', // img url for every time point 图片地址 可留空
title: 'hello world', // important! title *时间点标题
text: 'first post', // important! the content you want show *时间点内容
linkUrl: 'https://www.google.com', // url for read more 链接url 留空则不显示按钮
linkText: 'Read detail', // show what in read for more button 按钮显示内容 默认为Read more
date: '2017-1-1' // time of the point 时间点
}
]
- currentPoint为绑定回调函数
<timeLine @currentPoint="your function"></timeLine>
网友评论