基于vue、element实现类似钉钉会议室预定时间选择
预览地址
Attributes| 属性 | 属性名 | 是否必填 | 默认值 | 类型 |
|---|---|---|---|---|
| 最小时间 | minHour | 否 | 0 | string/number |
| 最大时间 | maxHour | 否 | 24 | string/number |
| 一格对应时间(分钟) | unit | 否 | 30 | string/number |
| 一格表示的时段对应的刻度 | scale | 否 | 0.5 | string/number |
| 被他人预定 | disabledList | 否 | [{name:'',time:0}] | array |
| 被我预定 | checkedList | 否 | [] | array |
| dom节点 | domRef | 是 | "" | string |
| 传入时间 | date | 否 | "" | string 提前多少小时 |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| getHours | 获取返回参数 | 组件绑定值 |
| clearHours | 重置其它time-line组件状态 | 组件绑定值 |
<time-line domRef="vs" @getHours="getHours" :clear="clear=='vs'" @clearHours="clearHours"/>
被我选择过的时段
<time-line domRef="vs3" :minHour="7" :maxHour="23" :checkedList="[12,12.5,13.5]" @getHours="getHours" :clear="clear=='vs3'" @clearHours="clearHours"/>
其它人选择过的时段
<time-line domRef="vs18" :minHour="10" :maxHour="21" :disabledList="[{name:'张三',time:15},{name:'李四',time:15.5},{name:'王五',time:16}]" @getHours="getHours" :clear="clear=='vs18'" @clearHours="clearHours"/>
传递时间
<time-line domRef="vs19" :date="'2020-06-08'" :minHour="10" :maxHour="21" @getHours="getHours" :clear="clear=='vs19'" @clearHours="clearHours"/>
/**
*
* 获取选择后的参数
**/
getHours(e) {
this.$message({
type: 'success',
message: JSON.stringify(e)
})
}
/**
* 借助父组件的clear实现组件互相触发重置功能
**/
clearHours(e) {
this.clear = e
}
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
