A Vue component to hzqing vue Timeline

hzqing-vue-timeline

A Vue component to hzqing-vue-timeline A Vue time plugin

example (picture display)

Screen width is greater than 1200px

Screen width is less than 1200px

installation

npm install -S hzqing-vue-timeline

How to introduce

main.js:

// global registration 
Import  hzqingVueTimeline  from  'hzqing-VUE-Timeline' 
Vue . Use ( hzqingVueTimeline )

 <hzqing-vue-timeline></hzqing-vue-timeline>

Configuration

Introduce components

   <hzqing-vue-timeline 
   timelineColor="#5bbcd5"  
   timeContentColor="#fff"
   :dataList="data"
   ></hzqing-vue-timeline>

Component data

    data: [ 
        { 
            time : 1522372393000 , 
            img : 'static/touxiang.jpeg' , 
            title : 'hzqing.com' , 
            content : 'This is Heng 
        Zhaoqing 's personal blog' } , 
        { 
            time : '2018-03-30 14 :36:35' , 
            img : 'static/one.jpeg' , 
            title : 'This is a simple vue timeline plugin' , 
            content : 'This is a simple vue timeline plugin, very convenient to use' 
        } , 
        { 
            time : 1522372393000 , 
            img : 'static/three.jpg', 
            title : 'Struggle hard' , 
            content : 'When you find your talent can't support ambition, please calm down and study~~~' 
        } 
    ]

Download Details:

Author: mmd0308

Live Demo: http://www.hzqing.com/diary?navHeader=个人日记

GitHub: https://github.com/mmd0308/hzqing-vue-timeline

#vuejs #javascript #vue #vue-js