关于element的时间选择器
image.png
image.png
element的时间选择器有两种一种是select选择器单选,可以设置时间间隔,一种是范围选择器,但是没法设置时间间隔,且必须选择秒数.当然select单选写两个也同样可以实现范围选择器的效果.但是我们的需求是一个输入框搞定.
image.png
实现后的功能
1.开始与结束时间互斥选择
2.step时间间隔
3.打开后自动定位
4.禁止选择范围
第一个版本是用input + popover做的,能满足需求但是效果并不是特别好. 这一版本重构了下, 用input+Dropdown 去做.以前的定位是focus定位,会出现屏幕滚动现象.这次用了element自带的scroll-into-view去做.基本实现了和自带组件一样的效果.
看代码
<times :step="15" :disabledTimes="disabledTimes" :start="start" :end="end" :stepCheckd="stepCheckd"></times>
<script>
export default {
data() {
return {
disabledTimes: ['01:15', '06:15'],
start: '06:00',
end: '18:00',
stepCheckd: true
}
}
//对应组件里面的参数
//step: 时间间隔, 单位分钟,默认值15分钟
//start: 最小开始时间 默认 '00:00'
//end: 最大结束时间 默认'24:00'
//stepCheckd: 选择开始结束时间是否遵循step, 如果为false 可以选择两个同样的时间, 默认true
//disabledTimes: 禁止选择的时间范围 数组形式
//defaultValue 默认值
//width: 默认的input框的宽度
//disabled:是否禁止选中
export default {
props: {
step: {
type: Number,
default: () => 15
},
start: {
type: String,
default: () => '00:00'
},
end: {
type: String,
default: () => '24:00'
},
stepCheckd: {
type: Boolean,
default: () => true
},
disabledTimes: {
type: Array,
default: () => []
},
defaultValue: {
type: String
},
width: {
type: Number,
default: () => 160
},
disabled: {
type: Boolean,
default: () => false
}
}
定义初始化及公共方法
// 首先是两个转换方法, 把时间转成数字分钟, 用来比较大小,以及把数字分钟转成字符串用来展示
getVtime(time) {
if (!time) {
return
}
const t = time.split(':')
return Number(t[0]) * 60 + Number(t[1])
},
setTime(time) {
if (!time) {
return
}
let t1 = Math.floor(time / 60)
let t2 = time % 60
t1 < 10 ? t1 = `0${t1}` : `${t1}`
t2 < 10 ? t2 = `0${t2}` : `${t2}`
return `${t1} : ${t2}`
},
// 初始化的时候看是否传进来最小开始时间 / 最大结束时间 / 然后递归根据时间间隔生成所有的可能选项
// 同时设置初始值 以及通过 this.checkValid() 验证初始值是否在可选择范围之内
init(type) {
if (this.start) {
this.vSTime = getVtime(this.start)
this.currTime = getVtime(this.start)
}
if (this.end) {
this.vETime = getVtime(this.end)
}
this.time = []
this.time.push({
label: setTime(this.vSTime),
value: this.vSTime
})
this.sortTime()
if (!type && this.defaultValue) {
this.setModel(this.defaultValue)
}
this.checkValid()
}
<template>
<div class="_time_box">
<el-dropdown ref="dropdowns" trigger="click" @visible-change="visibleChange">
<el-form
:model="form"
:rules="rules"
:inline-message="true"
ref="ruleForm"
>
<el-form-item prop="input">
<el-input
ref="inputs"
:disabled="disabled"
:style="{width : width + 'px'}"
v-model="form.input"
placeholder="请输入内容"
>
<i slot="suffix" class="el-input__icon el-icon-time"></i>
</el-input>
</el-form-item>
</el-form>
<el-dropdown-menu slot="dropdown">
<div class="box">
<div class="scrobox fr15">
<div class="title">开始时间</div>
<div ref="scorBox1" class="scrollbar">
<div
v-for="time in time"
:key="time.value + 's'"
class="checkbox"
:class="{active: time.value === form.startTime, disabled: getDisabled(time, 'start') }"
@click="getStartTime(time)"
>{{time.label}}</div>
</div>
</div>
<div class="scrobox">
<div class="title">结束时间</div>
<div ref="scorBox2" class="scrollbar">
<div
v-for="time in time"
:key="time.value + 'e'"
class="checkbox"
:class="{active: time.value === form.endTime, disabled: getDisabled(time)}"
@click="getEndTime(time)"
>{{time.label}}</div>
</div>
</div>
</div>
<div class="submit">
<span @click="saveValue">确定</span>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
主体文件,使用了input框配合弹出框构成的, 其实disabled状态是getDisabled方法判定的,涉及到开始结束的互斥选择及禁止选择的时间范围.
getDisabled(time, type) {
if (type === 'start') {
if (this.stepCheckd) {
if (this.disabledTimes.length) {
if (time.value >= this.getVtime(this.disabledTimes[0]) && time.value <= this.getVtime(this.disabledTimes[1])) {
return true
}
}
return this.form.endTime && time.value > this.form.endTime - this.step
}
return this.form.endTime && time.value > this.form.endTime
} else {
if (this.disabledTimes.length) {
if (time.value >= this.getVtime(this.disabledTimes[0]) && time.value <= this.getVtime(this.disabledTimes[1])) {
return true
}
}
if (this.stepCheckd) {
return this.form.startTime && time.value < this.form.startTime + this.step
}
return this.form.startTime && time.value < this.form.startTime
}
}
// watch 监听值的变化 重新init初始化可选项
watch: {
step: {
handler() {
this.init(true)
}
},
start: {
handler() {
this.init()
}
},
end: {
handler() {
this.init()
}
}
},
// 最后选择之后点击确定拿到开始结束时间展示就可以了 保存的时候验证值是否变化以及是否在可选范围以内
async saveValue() {
this.$refs.dropdowns.hide()
if (!this.form.startTime || !this.form.endTime) {
return
}
if (this.form.input === `${setTime(this.form.startTime).replace(/\s+/g, '')} - ${setTime(this.form.endTime).replace(/\s+/g, '')}`) {
return
}
const result = await this.checkValid()
if (result) {
this.form.input = `${setTime(this.form.startTime).replace(/\s+/g, '')} - ${setTime(this.form.endTime).replace(/\s+/g, '')}`
this.currInput = `${setTime(this.form.startTime).replace(/\s+/g, '')} - ${setTime(this.form.endTime).replace(/\s+/g, '')}`
this.$emit('getValue', this.form)
}
},
到此一个组件基本完成剩下的只是样式问题
看下几个应用场景的效果图
image.png
image.png
image.png
image.png
image.png
image.png
