vuepress-timeline-c

安装

npm i vuepress-timeline-c -D

使用

• 在需要使用时间轴的页面引用(名字可以随便取)

import TimeLineC from 'vuepress-timeline-c'

在components中注册组件

• 如果自己取名字则用自己取的名字注册即可

components: {
   TimeLineC 
}

运用组件

<!-- 上下文代码 -->
------
<time-line-c :testList="array"/>
<time-line-c :testList="array" :mode="alternate"/>
<time-line-c :testList="array" :mode="right" :theme="dark" />
-----
<!-- 上下文代码 -->

传入参数

data() {
    return {
        array: [
            {
                text:'内容1rfrfrfrfrfrfrfrfrf分WFFFCEDFCEf',
                time:'2020-02-02'
            },
            {
                text:'内容2frrrrrrrr',
                time:'2020-02-02'
            },
            {
                text:'内容3frrrrrrgqerrrrrrrrrrr',
                time:'2020-02-02'
            },
            {
                text:'内容4',
                time:'2020-02-02',
            },
            {
                text:'内容5dfewwwwwwwwwg',
                time:'2020-02-02'
            },
            
        ]
    }
}

Props

| 参数 | 介绍 | 类型 | 可选值 | 默认值 | | ------- | -------------- | ------ | ------------ | ------ | | testList | 传入数组 | Array | - | [ ] | | mode | 布局模式 | String | left / right / alternate | left | | theme | 主题颜色 | String | dark / light | light |

Events

| 事件 | 介绍 | 返回值 |
| ------- | -------------- | ------ | | handleClick | 点击内容回调 | item, index |

效果图

主题（theme）

• light
• dark

布局（mode）

• left
• right
• alternate