Vue时间轴 vue-light-timeline - 素味平生的博客 - CSDN博客

安宇雨 - 随手采集
2019-09-24 21:15:56
随手采集
0000-未整理-等待研究

本文链接：https://blog.csdn.net/qq_40701522/article/details/87634700

轻量的vue时间轴组件

install

npm install vue-light-timeline

如果你使用的是yarn

yarn add vue-light-timeline

usage

import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline);

<template>  <light-timeline :items='items'></light-timeline></template> export default {  data () {    return {      items: [        {          tag: '2019-02-12',          content: '测试内容'        },        {          tag: '2019-02-13',          type: 'circle',          content: '练习内容'        }      ]    }  }}

或者你还可以为时间轴的每个部分传递插槽：

<template>  <light-timeline :items='items'>    <template slot='tag' slot-scope='{ item }'>      {{item.date}}    </template>    <template slot='content' slot-scope='{ item }'>      {{item.msg}}    </template>  </light-timeline></template><script>export default {  data () {    return {      items: [        {          date: '2019-02-12',          msg: '测试内容'        },        {          date '2019-02-13',          msg: '练习内容'        }      ]    }  }}