Vue.js 的可爱时间轴组件 - vue-cute-timeline

Vue.js 的可爱时间轴组件 - vue-cute-timeline
插件名称 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'
},