vant 时间范围选择器封装
<template>
<div class="edit-time-picker">
<van-popup v-model="showPicker" round position="bottom">
<van-picker
v-show="step === 1"
ref="picker"
show-toolbar
:columns="columns"
@cancel="showPicker = false"
@confirm="step = 2"
confirm-button-text="下一步"
/>
<van-picker
v-show="step === 2"
ref="secondPicker"
show-toolbar
:columns="columns"
@cancel="step = 1"
@confirm="onConfirm"
cancel-button-text="上一步"
confirm-button-text="确认"
/>
</van-popup>
</div>
</template>
<script>
import { Picker, Popup } from 'vant';
Vue.use(Picker).use(Popup);
export default {
data() {
return {
showPicker: false,
columns: [],
step: 1
}
},
created() {
this.initColumns()
},
methods: {
initColumns() {
const list = []
const Hours = []
const Minutes = []
const Seconds = []
for (let i = 0; i<=23; i++) {
Hours.push(String(i).padStart(2, '0'))
}
for (let i = 0; i<=59; i++) {
Minutes.push(String(i).padStart(2, '0'))
Seconds.push(String(i).padStart(2, '0'))
}
list.push({
values: Hours,
defaultIndex: 0
})
list.push({
values: Minutes,
defaultIndex: 0
})
list.push({
values: Seconds,
defaultIndex: 0
})
this.columns = list
},
open(times) {
this.showPicker = true
console.log('times', times)
// 设置当前选中时间 19:23:33 格式
if(times && times.length === 2) {
const initialTime = times[0].split(':')
if(initialTime.length === 3) {
this.$nextTick(() => {
this.$refs.picker && this.$refs.picker.setIndexes([Number(initialTime[0]), Number(initialTime[1]), Number(initialTime[2])])
})
}
const initialTime2 = times[1].split(':')
if(initialTime2.length === 3) {
this.$nextTick(() => {
this.$refs.secondPicker && this.$refs.secondPicker.setIndexes([Number(initialTime2[0]), Number(initialTime2[1]), Number(initialTime2[2])])
})
}
} else {
// 当前时间
const date = new Date();
let hours = String(date.getHours()).padStart(2, '0') // 时
let minutes = String(date.getMinutes()).padStart(2, '0') // 分
let seconds = String(date.getSeconds()).padStart(2, '0') //秒
this.$nextTick(() => {
this.$refs.picker && this.$refs.picker.setIndexes([Number(hours), Number(minutes), Number(seconds)])
this.$refs.secondPicker && this.$refs.secondPicker.setIndexes([Number(hours), Number(minutes), Number(seconds)])
})
}
},
// 下一步
nextStep() {
this.step = 2
},
// 如果time2大于time1 返回true 否则 返回false
compareTime(time1,time2) {
if(this.time_to_sec(time2)- this.time_to_sec(time1)>0){
return true;
}
return false;
},
//将时分秒转为时间戳
time_to_sec(time) {
if (time !== null) {
var s = "";
var hour = time.split(":")[0];
var min = time.split(":")[1];
var sec = time.split(":")[2];
s = Number(hour * 3600) + Number(min * 60) + Number(sec);
return s;
}
},
onConfirm() {
const firstValues = this.$refs.picker.getValues()
const secondValues = this.$refs.secondPicker.getValues()
const time1 = firstValues.join(':')
const time2 = secondValues.join(':')
// 判断结束时间大于开始时间
const validTime = this.compareTime(time1, time2)
if(!validTime) return this.$toast('开始时间设置不能大于结束时间')
this.showPicker = false
this.step = 1
this.$emit('confirm', [time1, time2])
}
},
}
</script>
<style lang="less" scoped>
.edit-time-picker {
/deep/.van-picker__confirm {
color: #0056FF;
}
}
</style>
// 使用方式
<time-range-picker ref="timeRangePicker" @confirm="confirmTimeRangePicker" />
this.$refs.timeRangePicker.open(['12:23:24', '15:12:33'])
