美文网首页Vuevue.js之初体验Vue.js
开源vue的time line 插件

开源vue的time line 插件

作者: Mizuka | 来源:发表于2017-02-13 10:10 被阅读138次

    vue-timeline

    由于在vue没找到适合的插件,就自己封装了一个基于css3的
    插件地址:click me!

    logo.png

    预览

    ![small.png](http:https://img.haomeiwen.com/i3178153/9b89ffa883b01834.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    特性

    1. 响应式
    2. 鼠标移入时间点有回调事件

    使用方法

    1. 引入components底下的timeLine 并绑定points属性
    <timeLine :points="points"></timeLine>
    
    1. 配置每个时间点(可以缺少或不配置大部分选项)
    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 时间点
              }
            ]
    
    1. currentPoint为绑定回调函数
    <timeLine @currentPoint="your function"></timeLine>
    

    相关文章

      网友评论

        本文标题:开源vue的time line 插件

        本文链接:https://www.haomeiwen.com/subject/avpzittx.html