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属性，实现表格自动定位 |