vue元件 -- 實現一種小時級時間段選擇
阿新 • • 發佈:2021-01-27
技術標籤:javascriptvue.js
效果
操作大概是選擇一個開始時間和一個結束時間(從左往右選是選擇,從右往左是取消),排除已選後計算他們總的時間段。
code
<template> <div> <div class="hours-container"> <div v-for="(item, index) in hours" :key="index" class="hours-item"> <div class="hours-item-header">{{ compItem(item) }}</div> <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> </div> <div class="tips">{{ tips }}</div> </div> </template> <script> /* * @Description 為了實現24小時區間選擇,若有星期的需求直接看 TimeRangeList元件 * @Author dengkangning * @Date 2020年11月18日 16:33:19 */ export default { model: { prop: "sendTimeList", }, props: { sendTimeList: { required: true, default: [] }, readonly: { type: Boolean, default: false } }, watch: { timeRangeList: function (value) { this.$emit('change', value); this.$parent.$emit("el.form.change");// 觸發父元件的校驗規則 }, sendTimeList:{ handler () { this.transformedIndex(); }, deep:true } }, computed: { }, data() { return { hours: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22],// 選項 selectStart: false,// 開始 startIndex: '',// 開始下標 timeRangeList: [],// 選擇的時間段 timeRangeListIndex: [],// 選中的下標 tempRangeIndex: [],// 預選下標 tips: '向右選中,向左取消選擇' } }, methods: { // 時間區間轉換成下標區間 transformedIndex() { this.timeRangeListIndex = []; this.timeRangeList = this.sendTimeList; this.timeRangeList.forEach(element => { const [startTime, endTime] = element.match(/\d+\:\d+/g); 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 = []; 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) {// 如果有開始時間,直接確定結束時間 let endHour = Math.floor((index + 1) / 2); let endMin = (index + 1) % 2 === 0 ? "00" : "30"; endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`; } else {// 沒有開始時間,確定當前點為開始時間 let startHour = Math.floor(index / 2); let startMin = index % 2 === 0 ? "00" : "30"; startTime = `${startHour < 10 ? '0' + startHour : startHour}:${startMin}`; } if (index === 2 * this.hours.length + 1) { // 如果是最後一格,直接結束 endTime = `${Math.floor((index + 1) / 2)}:00`; this.timeRangeList.push(`${startTime ? startTime : "23:30"}-${endTime}`); startTime = ''; endTime = ''; } } else { // 若這個點不在選擇區間,確定一個時間段 if (startTime && endTime) { this.timeRangeList.push(`${startTime}-${endTime}`); startTime = ''; endTime = ''; } else if (startTime && !endTime) {// 這裡可能只選半個小時 let endHour = Math.floor(index / 2); let endMin = index % 2 === 0 ? "00" : "30"; endTime = `${endHour < 10 ? '0' + endHour : endHour}:${endMin}`; this.timeRangeList.push(`${startTime}-${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'; }, compItem(item) {// 不足10前面補0 return item < 10 ? `0${item}` : item; }, }, mounted() { this.transformedIndex(); } } </script> <style lang="scss" scoped> .hours-container { display: flex; cursor: pointer; .hours-item { width: 30px; height: 60px; border: 1px solid #c2d0f3; border-right: none; text-align: center; &:last-child { border-right: 1px solid #c2d0f3; } .hours-item-header { width: 100%; height: 30px; line-height: 30px; border-bottom: 1px solid #c2d0f3; } .hours-item-value { width: 100%; height: 30px; box-sizing: border-box; display: flex; .hours-item-left, .hours-item-right { width: 50%; height: 100%; border-right: 1px solid #c2d0f3; box-sizing: border-box; &:last-child { border-right: none; } } } .selected { background-color: #4e84fe; border-bottom: 1px solid #c2d0f3; } .preSelected { background-color: #8eaffc; border-bottom: 1px solid #c2d0f3; } .unSelected { background-color: #ffffff; border-bottom: 1px solid #c2d0f3; } } } .tips { width: 100%; line-height: 30px; } </style>