一个简单的Vue.js组件，可在Web应用程序上生成响应的，垂直的，可配置的动画时间轴。

变更日志：

0.1.17（2020年7月20日）

• 添加日期字符串props

安装和下载：

# Yarn
$ yarn add @growthbunker/vuetimeline

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

使用：

1.在项目中导入并注册vuetimeline。

import Vue from "vue";
import vuetimeline from "@growthbunker/vuetimeline";
Vue.use(vuetimeline);

2.将您自己的事件添加到时间线。

<pre><template>

<vue-timeline-update
:date="new Date('2019-11-12')"
title="Event 1 Title"
description="Event 1 Description"
thumbnail="1.jpg"
category="vue"
icon="vue"
color="red"
/>

<vue-timeline-update
:date="new Date('2019-10-12')"
title="Event 2 Title"
description="Event 2 Description"
thumbnail="2.jpg"
category="js"
icon="js"
color="blue"
/>

<vue-timeline-update
:date="new Date('2019-09-12')"
title="Event 3 Title"
description="Event 3 Description"
thumbnail="3.jpg"
category="css"
icon="css"
color="white"
is-last
/>
</template></pre>

3.可用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
},
description: {
  type: String,
  required: true
},
icon: {
  type: String,
  required: true
},
isLast: {
  type: Boolean,
  default: false
},
thumbnail: {
  type: String,
  default: null
},
title: {
  type: String,
  required: true
}

4.事件处理程序。

• click：单击事件时触发
• click：单击缩略图时触发
• click：title：单击标题时触发

---

官网：https://github.com/growthbunker/vuetimeline

演示：https://www.vue365.cn/code_demo.php?id=265

GitHub下载：https://github.com/growthbunker/vuetimeline/archive/master.zip