Vue 会议室时间选择器
原文链接: https://blog.csdn.net/Alan0728/article/details/123326325
对比原文修改过的内容
1、原文以5分钟间隔做的时间区间选择器,这里改成了半小时区间
2、修改了css样式,原时间轴改为框选
3、修改了数据格式,原[“01:00-02:00”]改为了[{startTime:“01:00”,endTime:“02:00”}]
代码
<template>
<div class="meeting-time-range">
<div class="hours-container">
<div v-for="(item, index) in hours" :key="index" class="hours-item">
<div class="hours-item-value">
<div :class="compClass(2 * item)"
@click="handleClick(2 * item)"
@mouseover="handleHover(2 * item)"></div>
<div :class="compClass(2 * item + 1)"
@click="handleClick(2 * item + 1)"
@mouseover="handleHover(2 * item + 1)"></div>
</div>
<div class="hours-item-header">
<span>{{ timeHours[index] }}</span>
</div>
</div>
</div>
<div class="tips color999 font12 font">
<i class="el-icon-warning font14"></i>操作提示:点击向右滑动为选中,反之取消。
</div>
<div class="tips"><span class="color999">已选时间段:</span>
<span class="font times"
style="color:#1890ff"
v-for="(items,index) in tips"
:key="index">{{ items }},</span>
</div>
</div>
</template>
<script>
export default {
model: {
prop: "sendTimeList",
},
props: {
sendTimeList: {
required: true,
default: [
{
startTime: "04:00",
endTime: "05:00"
},
{
startTime: "11:00",
endTime: "11:30"
},
]
},
readonly: {
type: Boolean,
default: false
},
timeLineLists: {
type: Array
}
},
watch: {
timeLineLists() {
this.sendTimeList = this.timeLineLists
},
tips() {
this.$emit('tipsList', this.tips)
},
timeRangeList: function (value) {
this.$emit('change', value);
this.$parent.$emit("el.form.change");// 触发父组件的校验规则
},
sendTimeList: {
handler() {
this.transformedIndex();
},
deep: true
}
},
computed: {},
data() {
return {
hours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
timeHours: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],// 选项
selectStart: false,// 开始
startIndex: '0',// 开始下标
timeRangeList: [],// 选择的时间段
timeRangeListIndex: [0],// 选中的下标
tempRangeIndex: [],// 预选下标
tips: '向右选中,向左取消选择',//提示操作
endHour: '',//选择结束时间
endMin: '',//选择结束分钟
startHour: '',//开始时间
startMin: '',//开始时间
// sendTimeList: []
}
},
methods: {
// 时间区间转换成下标区间
transformedIndex() {
this.timeRangeListIndex = [];
this.timeRangeList = this.sendTimeList;
this.timeRangeList.forEach(item => {
const {startTime, endTime} = item
if (startTime && endTime) {
let [startHour, startMin] = startTime.split(':');
let [endHour, endMin] = endTime.split(':');
if (startHour && startMin && endHour && endMin) {
let startNum, endNum;
if (startMin === '00') {
startNum = 2 * parseInt(startHour);
} else {
startNum = 2 * parseInt(startHour) + 1;
}
if (endMin === '00') {
endNum = 2 * parseInt(endHour) - 1;
} else {
endNum = 2 * parseInt(endHour);
}
while (endNum >= startNum) {
this.timeRangeListIndex.push(startNum);
startNum++;
}
} else {
this.$message.error("时间段格式不正确");
}
} else {
this.$message.error("没有拿到开始时间或结束时间或者时间段格式不对");
}
});
this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';
},
// 下标区间转换成时间区间
transformedSection() {
this.timeRangeList = [];
// Array.from(new Set(this.timeRangeList))
let startTime = '', endTime = '', len = this.hours.length;
for (let index = this.hours[0] * 2; index < 2 * (len + 1); index++) {
if (this.timeRangeListIndex.indexOf(index) > -1) {
// 如果有开始时间,直接确定结束时间
if (startTime) {
this.endHour = Math.floor((index + 1) / 2);
//判断是否重复选择选择下标开始结束时间
if (this.endHour === this.startHour) {
let endTimeAll = 30 * ((index) % 2) === 30 ? '30' : 30 * ((index) % 2)
this.endMin = (index + 1) % 2 === 0 ? "00" : endTimeAll;
endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
} else {
let endTimeAll = 30 * ((index + 1) % 2) === 30 ? '30' : 30 * ((index + 1) % 2)
this.endMin = (index + 1) % 2 === 0 ? "00" : endTimeAll;
endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
}
} else {
// 没有开始时间,确定当前点为开始时间
this.startHour = Math.floor(index / 2);
let startTimeAll = 30 * (index % 2) === 30 ? '30' : 30 * ((index) % 2)
this.startMin = index % 2 === 0 ? "00" : startTimeAll;
startTime = `${this.startHour < 10 ? '0' + this.startHour : this.startHour}:${this.startMin}`;
}
// 如果是最后一格,直接结束
if (index === 2 * this.hours.length + 1) {
endTime = `${Math.floor((index + 1) / 2)}:00`;
this.timeRangeList.push({
startTime: startTime ? startTime : "23:30",
endTime: endTime
});
startTime = '';
endTime = '';
}
} else {
// 若这个点不在选择区间,确定一个时间段
if (startTime && endTime) {
this.timeRangeList.push({
startTime: startTime,
endTime: endTime
});
startTime = '';
endTime = '';
} else if (startTime && !endTime) {
// 这里可能只选半个小时
this.endHour = Math.floor(index / 2);
//判断是否重复选择选择下标开始结束时间
if (this.endHour === this.startHour) {
let endTimeAll = 30 * ((index) % 2) === 30 ? '30' : 30 * ((index) % 2)
this.endMin = (index) % 2 === 0 ? "00" : endTimeAll;
endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
this.timeRangeList.push({
startTime: startTime,
endTime: endTime
});
startTime = '';
endTime = '';
} else {
let endTimeAll = 30 * ((index + 1) % 2) === 30 ? '30' : 30 * ((index + 1) % 2)
this.endMin = (index) % 2 === 0 ? "00" : endTimeAll;
endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
this.timeRangeList.push({
startTime: startTime,
endTime: endTime
});
startTime = '';
endTime = '';
}
}
}
}
this.tips = this.timeRangeList && this.timeRangeList.length > 0 ? this.timeRangeList : '';
},
// 点击事件
handleClick(index) {
if (this.selectStart) {
// 双击取反
if (index === this.startIndex) {
if (this.timeRangeListIndex.indexOf(index) > -1) {
this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
} else {
this.timeRangeListIndex.push(this.startIndex);
}
} else if (index > this.startIndex) {
// 选取数据--向右添加,向左取消
while (index >= this.startIndex) {
this.timeRangeListIndex.push(this.startIndex);
this.startIndex++;
}
this.timeRangeListIndex = Array.from(new Set(this.timeRangeListIndex));
} else {
// 删除数据
while (this.startIndex >= index) {
if (this.timeRangeListIndex.indexOf(index) > -1) {
this.timeRangeListIndex.splice(this.timeRangeListIndex.indexOf(index), 1);
}
index++;
}
}
this.startIndex = '';
this.tempRangeIndex = [];
this.transformedSection();
} else {
this.startIndex = index;
}
this.selectStart = !this.selectStart;
},
// 预选区间
handleHover(index) {
if (this.selectStart) {
this.tempRangeIndex = [];
// 选取数据--向右添加,向左取消
if (index > this.startIndex) {
while (index >= this.startIndex) {
this.tempRangeIndex.push(index);
index--;
}
} else {
// 删除数据
while (this.startIndex >= index) {
this.tempRangeIndex.push(index);
index++;
}
}
}
},
// 是否选中,计算className
compClass(index) {
if (index === this.startIndex) {
return 'hours-item-left preSelected';
}
if (index >= this.startIndex) {
if (this.tempRangeIndex.indexOf(index) > -1) {
return 'hours-item-left preSelected';
}
} else {
if (this.tempRangeIndex.indexOf(index) > -1) {
return 'hours-item-left unSelected';
}
}
return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
},
},
mounted() {
this.transformedIndex();
this.transformedSection();
}
}
</script>
<style lang="scss" scoped>
.meeting-time-range {
padding: 15px;
}
.hours-container {
margin-left: 1.5%;
display: flex;
cursor: pointer;
margin-top: 10px;
.hours-item {
width: 4%;
border-right: none;
text-align: center;
&:nth-last-of-type(2) {
.hours-item-value {
border-right: 1px solid #ccc;
}
}
&:last-child {
.hours-item-value {
display: none;
}
.hours-item-header {
margin-top: 30px;
}
}
.hours-item-header {
text-align: left;
margin-left: -22%;
}
.hours-item-value {
width: 100%;
height: 31px;
box-sizing: border-box;
display: flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
.hours-item-left,
.hours-item-right {
width: 50%;
height: 30px;
box-sizing: border-box;
}
}
.selected {
background-color: rgba(0, 87, 255, 0.4);
}
.preSelected {
background-color: rgba(255, 148, 49, 0.4);
}
.unSelected {
background-color: #ffffff;
}
}
}
.tips {
border-radius: 4px;
line-height: 30px;
border: 1px solid #1890ff;
background: rgba(53, 158, 255, 0.05);
padding: 5px 20px;
.times {
margin-right: 0;
}
}
</style>
回显
设置或修改sendTimeList的值可实现回显
感谢 麋麋鹿 大佬的贡献
原文链接: https://blog.csdn.net/Alan0728/article/details/123326325