A Vue component to hzqing vue Timeline

A Vue component to hzqing vue Timeline

hzqing-vue-timeline . Vue's timeline plugin .A Vue component to hzqing-vue-timeline A Vue time plugin

hzqing-vue-timeline

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

example (picture display)

Screen width is greater than 1200px

HZQING

Screen width is less than 1200px

HZQING

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=%E4%B8%AA%E4%BA%BA%E6%97%A5%E8%AE%B0

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

vuejs javascript vue vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router