# vue-timeLine

**Repository Path**: zhangweijie333/vue-time-line

## Basic Information

- **Project Name**: vue-timeLine
- **Description**: 基于vue的横向时间线插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-06-08
- **Last Updated**: 2023-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-timeLine

#### 介绍
基于vue的横向时间线插件

#### 使用说明

1.  需要将 timeLineItem.vue 子组件文件复制到项目中，父组件中直接引用子组件：  
```html
<time-line-item
    v-for="(item, index) in sourceData"
    :key="'item_'+index"
    :content='item.content'
    :timestamp='item.timestamp'
    :hideTimestamp='true'
    :tampText='index+1+""'
    :isActive='item.isActive'
></time-line-item>
```
> 其中，sourceData为数据源  

2.  子组件props说明：
| 属性名        | 说明               | 类型    | 默认值  |
| ------------- | ------------------ | ------- | ------- |
| content       | 每个节点的内容     | string  | 空      |
| timestamp     | 时间节点           | string  | 空      |
| hideTimestamp | 是否隐藏时间节点   | boolean | false   |
| tampText      | 每个节点圆圈内文字 | string  | 空      |
| isActive      | 是否为激活状态     | boolean | false   |
| activeColor   | 激活状态文字颜色   | string  | #409eff |
| defaultColor  | 未激活状态文字颜色 | string  | #ccc    |

#### 最终效果
<img src="http://m.qpic.cn/psc?/V12tM6q61Niw5x/45NBuzDIW489QBoVep5mcWSL848u1ifELv1sDC1HDtVEcruRrrv.9GAxzykJyzIpXrSu8GsrgBivEgE28YIIDSeq55fhR3g.6CZb64Hgu.8!/b&bo=KwO.AAAAAAADF6Q!&rf=viewer_4" alt="截图" style="zoom:80%;" />