插件名称 | vue-cute-timeline |
---|---|
发布时间 | 2021年10月12日 |
用于 Vue.js 应用程序的简单但可自定义的时间轴组件。
# Yarn
$ yarn add vue-cute-timeline
# NPM
$ npm i vue-cute-timeline
1. 导入必要的组件。
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
import 'vue-cute-timeline/dist/index.css'
export default {
components: {
Timeline,
TimelineItem,
TimelineTitle
}
}
2. 添加事件到时间线组件。
<template>
<timeline>
<timeline-title>Title</timeline-title>
<timeline-item bg-color="#9dd8e0">Item 1</timeline-item>
<timeline-item :hollow="true">Item 22</timeline-item>
</timeline>
</template>
3.Timeline
组件的可用道具。
timelineTheme: {
type: String,
default: '#dbdde0'
},
timelineBg: {
type: String,
default: '#fff',
}
4.TimelineItem
组件的可用道具。
bgColor: {
type: String,
default: ''
},
lineColor: {
type: String,
default: ''
},
hollow: {
type: Boolean,
default: false
},
iconSize: {
type: String,
default: ''
},
fontColor: {
type: String,
default: '#37414a'
},