vue-cute-timeline | 一款基于vuejs的漂亮的时间轴组件

vue cute timeline是一款基于vuejs的漂亮的时间轴组件。它使用简单，可以快速生成漂亮的时间轴效果。

使用方法

安装

如果您想使用vue cute timeline时间轴插件，首先您需要安装它，命令如下：

npm install vue-cute-timeline --save
// 或者
yarn add vue-cute-timeline --save
		

使用

然后在要使用时间轴效果的地方使用它

 <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item bg-color="#9dd8e0">item1</timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>

import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
import 'vue-cute-timeline/dist/index.css'

export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
}

		

timeline配置参数

• timeline-theme: 时间线组件的主题颜色。默认值为#dbdde0
• timeline-bg: 时间线圆圈组件的背景色。默认值为#dbdde0

timeline-item配置参数

• bg-color: 设置圆圈和圆圈的边框颜色。默认值为#dbdde0
• line-color: 只设置圆圈的边框颜色。默认值为#dbdde0
• hollow: 控制圆圈是否是空心的。hollow不能与bg-color一起使用时，除非您希望更改空心背景色。默认值为false
• font-color: 设置时间线项或标题字体颜色。默认值为#37414a
• icon-size: 设置时间线项或标题图标大小。可选值有 'small'| 'medium'|'large'。默认值为：''

github网址：https://github.com/luyilin/vue-cute-timeline