0.0.2 • Published 6 months ago
time-line-choice v0.0.2
install
npm install time-line-choice
or
yarn add time-line-choiceuse
全局注册
import { TimeLineChoice } from time-line-choice
vue.use(TimeLineChoice)按需引入
import { TimeLineChoice } from time-line-choice
components: {
TimeLineChoice
}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 提前多少小时 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| 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
}