插件名称 | vueye-timeline |
---|---|
发布时间 | 2020年7月23日 |
插件作者 | boussadjra |
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
}
};