一个简单，响应迅速，美观，可自定义的时间轴组件，可在Web应用程序上展示所有事件。

作为Vue.js组件或Nuxt.js插件提供。

安装和下载：

# Yarn
$ yarn add @growthbunker/vuetimeline

# NPM
$ npm i @growthbunker/vuetimeline --save

基本用法：

1.安装后导入时间轴组件。

import vuetimeline from "@growthbunker/vuetimeline";

module.exports = {
  // 或者作为一个Nuxt.js插件
  plugins: [{ src: "@/plugins/vuetimeline.js" }];
}

2.注册组件。

Vue.use(vuetimeline)

3.向时间轴添加尽可能多的事件，如下所示：

<template>
  <vue-timeline-update
    :date="new Date('2020-07-01')"
    title="时间轴事件标题1"
    description="时间轴事件描述1"
    thumbnail="1.jpg"
    category="vue"
    icon="code" // 自定义图标
    color="red" // 自定义标题颜色
  />
  <vue-timeline-update
    :date="new Date('2020-06-01')"
    title=时间轴事件标题2"
    description="时间轴事件描述2"
    thumbnail="2.jpg"
    category="script"
    icon="code" // 自定义图标
    color="yellow" // 自定义标题颜色
  />
  <vue-timeline-update
    :date="new Date('2020-05-01')"
    title="时间轴事件标题3"
    description="时间轴事件描述3"
    thumbnail="3.jpg"
    category="com"
    icon="code" // 自定义图标
    color="black" // 自定义标题颜色
  />
  ... 更多的事件 ...
</template>

默认props

animation: {
  type: Boolean,
  default: true
},
animationContainer: {
  type: String,
  default: null
},
animationDuration: {
  type: Number,
  default: 1500
},
category: {
  type: String,
  default: null
},
color: {
  type: String,
  default: "blue",
  validator(x) {
    return ["black", "blue", "green", "orange", "purple", "red", "turquoise", "white"].includes(
      x
    )
  }
},
date: {
  type: Date,
  required: true
},
dateString: {
  type: String,
  default: null
},
description: {
  type: String,
  default: null
},
icon: {
  type: String,
  required: true
},
isLast: {
  type: Boolean,
  default: false
},
thumbnail: {
  type: String,
  default: null
},
title: {
  type: String,
  required: true
}