vue-horizontal-timeline水平时间轴

如何安装

npm

$ npm install vue-horizontal-timeline --save

yarn (recommended)

$ yarn add vue-horizontal-timeline

快速使用

Vue.js

全局使用 在main.js中引入

import Vue from "vue";
import VueHorizontalTimeline from "vue-horizontal-timeline";

Vue.use(VueHorizontalTimeline);

按需引入

import { VueHorizontalTimeline } from "vue-horizontal-timeline";
// In v0.8+ you don't need the brackets above

export default {
  components: {
    VueHorizontalTimeline,
  },
};

基本用法

<template>
  <vue-horizontal-timeline :items="items" />
</template>

<script>
  export default {
    data() {
      const example1 = {
        title: "Title example 1",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const example2 = {
        title: "Title example 2",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const example3 = {
        title: "Title example 3",
        content:
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
      };
      const items = [example1, example2, example3];

      return { items };
    },
  };
</script>

Props

Property name	Type	Default	Description
items	Array	null	要显示的对象数组。必须至少有一个内容属性
item-selected	Object	{}	单击时设置的对象。请注意，可点击属性必须设置为true
item-unique-key	String	''	点击时为卡片设置蓝色边框的键（可点击属性必须设置为true）
title-attr	String	'title'	项数组中用于设置卡片标题的对象内部属性的名称
title-centered	Boolean	false	集中卡片标题
title-class	String	''	为卡片标题设置自定义类
title-substr	String	18	要在卡片标题内显示的字符数。超出部分，将设置一个“…”
content-attr	String	'content'	项数组中用于设置卡片内容的对象内部属性的名称
content-centered	Boolean	false	集中所有卡片内容文本
content-class	String	''	如果要为卡片内容设置自定义类，请在此处设置
content-substr	String	250	要在卡片内容中显示的字符数。超出部分，将设置一个“…”
min-width	String	'200px'	最小宽度
min-height	String	''	最小高度
timeline-padding	String	''	Padding
timeline-background	String	'#E9E9E9'	背景色
line-color	String	'#03A9F4'	线的填充色
clickable	Boolean	true	使返回对象的卡可点击

还可以使用每个项目内的stepCssClass和boxCssClass属性更改每个项目的步长颜色和样式：

const example1 = {
  title: "Title example 1",
  content:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",
  stepCssClass: 'has-step-green',
  boxCssClass: 'has-color-red'
};
<style>
.has-color-red {
  color: red !important;
}

.has-step-green::after {
  background: green !important;
}
</style>

github地址：https://github.com/guastallaigor/vue-horizontal-timeline