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