Githubstyle-timeline NPM

githubstyle-timeline

A timeline module like the github used for Vue

Demo

Visit there to view demo

Usage

First install from npm:

npm i githubstyle-timeline --save

Then import it in the vue file (always in the enter js):

import { TimeLine } from 'githubstyle-timeline';
import 'githubstyle-timeline/dist/github-timeline.css';

Vue.component(TimeLine.name, TimeLine);

Then you can use it:

<template>
    <time-line></time-line>
</template>

props

name	usage	default	Type
requestURL	The data URL of you(Attention: The data structure is show in the below)	A mock URL	String
yearOptions	The years to be selected	2018,2017,2016,2015	Array
size	The size for the Module(one of 's','m','l')	'l'	String
autoScrollToTop	If scroll to the Top when change pages	true	Boolean
topPosition	The top offset when to scroll when change pages	0	Number

Data Structure

The data Structure is strict.

Request

The Default Request is a GET request, and the query in The URL contains begin(The begin timeStamp) and end(The end timeStamp).

Sending other query parameters is not yet supported, but will be supported later.

Response

The Response is in JSON format. You can find the format There

"content": {
    "begin": The begin timeStamp(same as the request),
    "beginDay": The ,
    "end": The end timeStamp(same as the request),
    "events": The events array
}