dl-schedule/README.md

dl-schedule 日程控件 用清晰的层级结构展示日程信息

## dl-schedule 日程控件
---
 用清晰的层级模块结构展示日程信息。
 
### 快速上手
#### 1. 安装
```
    npm install dl-schedule -S
```

#### 2. 在页面中引入 `dl-schedule`
``` 
<script>
    import DlSchedule from 'dl-schedule'
    export default {
      components: {
        DlSchedule
      },
      ...
    }
</script>
```
#### 3. demo
```
    <dl-schedule
      ref="dlSchedule"
      :date="'2020-07-21'" 
      :distance="30"
      :data-list="data">
      <template slot-scope="scope">
        <div>
          <div class="header">
            {{scope.col.startTime}}-{{scope.col.endTime}}
          </div>
          <p>
            {{scope.col.message}}
          </p>
        </div>
      </template>
    </dl-schedule>
```

### 属性参数

| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| 1 | data-list | 日程展示的数据。数据基本字段格式请看下表data参数 | Array | -- | -- |
| 2 | date | 当天日期，默认展示当天的日期 | String | -- | 当天的日期 |
| 3 | start-time | 日程的开始时间点。格式为 HH-mm，例如：08：00 | String | -- | 08:00 |
| 4 | end-time | 日程的结束时间点。格式为 HH-mm，例如：21：00 | String | -- | 21:00 |
| 5 | distance | 日程时间段的间隔刻度，单位为分钟 | String, Number | -- | 60 |
| 6 | sideWidth | 侧边栏时间列表的宽度 | String, Number | -- | 80 |
| 7 | maxHeight | 日程控件的最大高度 | Number  | -- | -- |
| 8 | minWidth | 控件表格td的最小宽度 | Number, String | -- | 200 |
| 9 | scrollToEarliest | 控件表格滚动到第一个日程 | Boolean | -- | false |
| 10 | showHeader | 展示日程的头部栏 | Boolean | -- | true |





#### data 参数

| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| 1 | allDay | 指定该项日程是否为全天日程。0为非全天，1表示全天 | Number | --- | --- |
| 2 | startTime | 指定该项日程的开始时间。格式为 HH-mm，例如：08：00 | string | --- | --- |
| 3 | endTime | 指定该项日程的结束时间。格式为 HH-mm，例如：21：00 | string | --- | --- |
| 4 | message | 指定该项日程展示的备注信息 | string | --- | --- |



### 组件方法
dl-schedule 内部只监听了data-list的动态修改。若想动态修改日程表的时间范围，可使用组件内部提供的方法
| 序号 | 方法名 | 说明 | 参数 |
| --- | --- | --- | --- |
| 1 | refreshData | 刷新日程表数据 | |



### Events 事件
| 序号 | 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | --- |
| 1 | col-click | 日程被点击时的回调 | col: 该项日程的数据对象 |

### 插槽
组件可使用作用域插槽来自定义展示日程项的信息展示。返回col对象


### 附文

组件使用中出现bug，或者想要与作者一起学习交流，欢迎添加我的微信：waitme1995

### 版本记录
| 序号 | 版本号 | 日期 | 说明 | 
| --- | --- | --- | --- |
| 1 | 1.0.2 | 2020.8.13 | 新增scrollToEarliest属性，实现表格自动定位 |