關(guān)于element的時(shí)間選擇器
image.png
image.png
element的時(shí)間選擇器有兩種一種是select選擇器單選,可以設(shè)置時(shí)間間隔,一種是范圍選擇器,但是沒法設(shè)置時(shí)間間隔,且必須選擇秒數(shù).當(dāng)然select單選寫兩個(gè)也同樣可以實(shí)現(xiàn)范圍選擇器的效果.但是我們的需求是一個(gè)輸入框搞定.
image.png
實(shí)現(xiàn)后的功能
1.開始與結(jié)束時(shí)間互斥選擇
2.step時(shí)間間隔
3.打開后自動(dòng)定位
4.禁止選擇范圍
第一個(gè)版本是用input + popover做的,能滿足需求但是效果并不是特別好. 這一版本重構(gòu)了下, 用input+Dropdown 去做.以前的定位是focus定位,會(huì)出現(xiàn)屏幕滾動(dòng)現(xiàn)象.這次用了element自帶的scroll-into-view去做.基本實(shí)現(xiàn)了和自帶組件一樣的效果.
看代碼
<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
}
}
//對(duì)應(yīng)組件里面的參數(shù)
//step: 時(shí)間間隔, 單位分鐘,默認(rèn)值15分鐘
//start: 最小開始時(shí)間 默認(rèn) '00:00'
//end: 最大結(jié)束時(shí)間 默認(rèn)'24:00'
//stepCheckd: 選擇開始結(jié)束時(shí)間是否遵循step, 如果為false 可以選擇兩個(gè)同樣的時(shí)間, 默認(rèn)true
//disabledTimes: 禁止選擇的時(shí)間范圍 數(shù)組形式
//defaultValue 默認(rèn)值
//width: 默認(rèn)的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
}
}
定義初始化及公共方法
// 首先是兩個(gè)轉(zhuǎn)換方法, 把時(shí)間轉(zhuǎn)成數(shù)字分鐘, 用來比較大小,以及把數(shù)字分鐘轉(zhuǎn)成字符串用來展示
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}`
},
// 初始化的時(shí)候看是否傳進(jìn)來最小開始時(shí)間 / 最大結(jié)束時(shí)間 / 然后遞歸根據(jù)時(shí)間間隔生成所有的可能選項(xiàng)
// 同時(shí)設(shè)置初始值 以及通過 this.checkValid() 驗(yàn)證初始值是否在可選擇范圍之內(nèi)
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="請(qǐng)輸入內(nèi)容"
>
<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">開始時(shí)間</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">結(jié)束時(shí)間</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框配合彈出框構(gòu)成的, 其實(shí)disabled狀態(tài)是getDisabled方法判定的,涉及到開始結(jié)束的互斥選擇及禁止選擇的時(shí)間范圍.
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 監(jiān)聽值的變化 重新init初始化可選項(xiàng)
watch: {
step: {
handler() {
this.init(true)
}
},
start: {
handler() {
this.init()
}
},
end: {
handler() {
this.init()
}
}
},
// 最后選擇之后點(diǎn)擊確定拿到開始結(jié)束時(shí)間展示就可以了 保存的時(shí)候驗(yàn)證值是否變化以及是否在可選范圍以內(nèi)
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)
}
},
到此一個(gè)組件基本完成剩下的只是樣式問題
看下幾個(gè)應(yīng)用場(chǎng)景的效果圖
image.png
image.png
image.png
image.png
image.png
image.png
