Vueye时间轴是一个易于使用的Vue组件，可在应用程序上呈现响应式的历史时间轴。

安装和下载：

# NPM
$ npm i vueye-timeline --save

如何使用它：

1.导入组件。

import VueyeTimeline from "VueyeTimeline";

2.将时间轴组件添加到模板。

<template>
  <div id="app">
    <VueyeTimeline :items="items">
      <template v-slot:content="{item}">
        <h2>{{item.title}}</h2>
        <div>{{item.body}}</div>
      </template>
      <template v-slot:opposite="{item}">
        <h1 :style="{color:item.styleConfig.background}">{{item.year}}</h1>
      </template>
    </VueyeTimeline>
  </div>
</template>

3.将项目添加到时间线。

export default {
  name: "App",
  data: () => ({
    items: [
      {
        title: "Item 1",
        body: "Event 1",
        year: 2010,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      {
        title: "Item 2",
        body: "Event 2",
        year: 2012,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      {
        title: "Item 3",
        body: "Event 3",
        year: 2016,
        styleConfig: {
          background: "#222",
          color: "#fff",
          dotColor: "#ff0000"
        }
      },
      // ...
    ]
  }),
  methods: {},
  components: {
    VueyeTimeline
  }
};

---

官网：https://github.com/boussadjra/vueye-timeline

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

GitHub下载：https://github.com/boussadjra/vueye-timeline/archive/master.zip