插件名称 | vuetimeline |
---|---|
发布时间 | 2020年4月21日 |
插件作者 | growthbunker |
一个简单的Vue.js组件,可在Web应用程序上生成响应的,垂直的,可配置的动画时间轴。
0.1.17(2020年7月20日)
# 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.事件处理程序。