Vue时间轴 vue-light-timeline的用法说明

什么是Vue时间轴 vue-light-timeline

Vue时间轴 vue-light-timeline是一个基于Vue.js的时间轴组件库，简单易用且高度自定义。

安装

使用npm命令进行安装：

npm install vue-light-timeline --save

如何使用

引入

在Vue项目中的main.js文件中引入：

import VueLightTimeline from 'vue-light-timeline';
import 'vue-light-timeline/dist/vue-light-timeline.min.css';
Vue.use(VueLightTimeline);

基本用法

<template>
  <vue-light-timeline>
    <vue-light-timeline-item
      v-for="item in timelineData"
      :key="item.id"
      :time="item.time"
      :icon="item.icon"
      :iconClass="item.iconClass"
      :badge="item.badge"
      :title="item.title"
      :details="item.details"
    ></vue-light-timeline-item>
  </vue-light-timeline>
</template>

<script>
export default {
  data() {
    return {
      timelineData: [
        {
          id: 1,
          time: '2021-05-01',
          icon: 'el-icon-date',
          iconClass: 'icon-success',
          badge: '初次尝试',
          title: '时间轴测试 一',
          details: '这是一次成功测试'
        },
        {
          id: 2,
          time: '2021-05-02',
          icon: 'el-icon-time',
          iconClass: 'icon-primary',
          badge: '',
          title: '时间轴测试 二',
          details: '多次测试，不间断的进行ing'
        },
        {
          id: 3,
          time: '2021-05-03',
          icon: 'el-icon-document',
          iconClass: 'icon-danger',
          badge: '紧急',
          title: '时间轴测试 三',
          details: '这次测试出现了一个严重的BUG'
        }
      ]
    }
  }
}
</script>

参数说明

VueLightTimeline参数

参数	说明	类型	可选值	默认值
reverse	是否颠倒	Boolean	-	false

VueLightTimelineItem参数

参数	说明	类型	可选值	默认值
time	时间，支持各种格式如：时间戳等	String/Number	-	-
icon	图标	String	-	-
iconClass	图标样式类	String	-	-
badge	徽标	String	-	-
title	标题	String	-	-
details	详情	String	-	-

自定义样式

通过修改样式类可以自定义组件的外观：

.timeline-item__icon--primary {
  background-color: #67c23a;
}
.timeline-item__icon--danger {
  background-color: #f56c6c;
}
.timeline-item__time {
  color: #909399;
  font-weight: bold;
}
.timeline-item__title {
  font-size: 18px;
  font-weight: bold;
}
.timeline-item__details {
  margin-top: 5px;
}
.timeline-item__badge {
  width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  border-radius: 10px;
  color: #fff;
  background-color: #409EFF;
  margin-right: 5px;
}

示例说明

示例1：时间轴（基础）

示例代码及效果：https://jsfiddle.net/9x78desp/

示例2：时间轴（自定义样式）

示例代码及效果：https://jsfiddle.net/awg2xe70/