时间段选择，时间轴选择，时间颗粒度为5分钟（vue）

已于 2022-11-24 17:51:03 修改
阅读量903 收藏 4
点赞数 2
分类专栏： 前端、原创 文章标签： 时间段选择
于 2022-11-24 17:45:14 首次发布
原文链接：https://blog.csdn.net/Alan0728/article/details/123326325
版权

效果：

不回显数据的

<!--
 * @FileDescription:轴选择器：对有所帮助的朋友点个关注再走呀！！！！
 * @Author: -----------
 * @LastEditors: ---------
-->
<template>
  <div style="margin-bottom: 50px;">
    <div class="hours-container">
      <div v-for="(item, index) in hours"
           :key="index"
           class="hours-item">
        <div class="hours-item-value"
             style="border-right:1px solid #ccc">
          <div :class="compClass(12 * item)"
               @click="handleClick(12 * item)"
               @mouseover="handleHover(12 * item)"></div>
          <div :class="compClass(12 * item + 1)"
               @click="handleClick(12 * item + 1)"
               @mouseover="handleHover(12 * item + 1)"></div>
          <div :class="compClass(12 * item + 2)"
               @click="handleClick(12 * item + 2)"
               @mouseover="handleHover(12 * item + 2)"></div>
          <div :class="compClass(12 * item + 3)"
               @click="handleClick(12 * item + 3)"
               @mouseover="handleHover(12 * item + 3)"></div>
          <div :class="compClass(12 * item + 4)"
               @click="handleClick(12 * item + 4)"
               @mouseover="handleHover(12 * item + 4)"></div>
          <div :class="compClass(12 * item + 5)"
               @click="handleClick(12 * item + 5)"
               @mouseover="handleHover(12 * item + 5)"></div>
          <div :class="compClass(12 * item + 6)"
               @click="handleClick(12 * item + 6)"
               @mouseover="handleHover(12 * item + 6)"></div>
          <div :class="compClass(12 * item + 7)"
               @click="handleClick(12 * item + 7)"
               @mouseover="handleHover(12 * item + 7)"></div>
          <div :class="compClass(12 * item + 8)"
               @click="handleClick(12 * item + 8)"
               @mouseover="handleHover(12 * item + 8)"></div>
          <div :class="compClass(12 * item + 9)"
               @click="handleClick(12 * item + 9)"
               @mouseover="handleHover(12 * item + 9)"></div>
          <div :class="compClass(12 * item + 10)"
               @click="handleClick(12 * item + 10)"
               @mouseover="handleHover(12 * item + 10)"></div>
          <div :class="compClass(12 * item + 11)"
               @click="handleClick(12 * item + 11)"
               @mouseover="handleHover(12 * item + 11)"></div>
        </div>
        <div class="hours-item-header">
          <span v-if="index === 0 || index === 24">{{ timeHours[index] }}</span>
        </div>
      </div>
    </div>
    <div class="tipss color999 font12 fontw ">
      <i class="el-icon-warning font14"></i>操作提示：点击向右滑动为选中，反之取消。
    </div>
    <div class="tips"><span class="color999">已选时间段：</span>
      <span class="fontw 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: []
    // },
    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(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 = 12 * parseInt(startHour);
            } else {
              startNum = 12 * parseInt(startHour) + 1;
            }
            if (endMin === '00') {
              endNum = 12 * parseInt(endHour) - 1;
            } else {
              endNum = 12 * 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] * 12; index < 12 * (len + 1); index++) {
        if (this.timeRangeListIndex.indexOf(index) > -1) {
          // 如果有开始时间，直接确定结束时间
          if (startTime) {
            // debugger
            this.endHour = Math.floor((index + 1) / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            }
          } else {
            // 没有开始时间，确定当前点为开始时间
            // debugger
            this.startHour = Math.floor(index / 12);
            let startTimeAll = 5 * (index % 12) === 5 ? '05' : 5 * ((index) % 12)
            this.startMin = index % 12 === 0 ? "00" : startTimeAll;
            startTime = `${this.startHour < 10 ? '0' + this.startHour : this.startHour}:${this.startMin}`;
          }
          // 如果是最后一格，直接结束
          if (index === 12 * this.hours.length + 1) {
            endTime = `${Math.floor((index + 1) / 12)}: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) {
            // 这里可能只选半个小时
            this.endHour = Math.floor(index / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            }
            // let endtimeAll = 15 * ((index + 1) % 4)
            // this.endMin = index % 4 === 0 ? "00" : endtimeAll;
            // endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.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();
    this.transformedSection();
  }
}
</script>
 
<style lang="scss" scoped>
.hours-container {
  margin-left: 1.5%;
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  .hours-item {
    width: 4%;
    height: 45px;
    // border: 1px solid #c2d0f3;
    border-right: none;
    text-align: center;
    &:last-child {
      .hours-item-value {
        display: none;
      }
      .hours-item-header {
        border-top: none;
        margin-top: 12px;
        margin-left: -25px;
      }
    }
 
    .hours-item-header {
      text-align: left;
      position: relative;
      margin-left: -20%;
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #ccc;
 
      &:last-child {
        width: 150%;
      }
    }
    .hours-item-value {
      width: 100%;
      height: 12px;
      box-sizing: border-box;
      display: flex;
      &:first-child {
        border-left: 1px solid #ccc;
      }
      &:last-child {
        border-right: 1px solid #ccc;
      }
      .hours-item-left,
      .hours-item-right {
        width: 50%;
        height: 11px;
        margin-top: 1px;
        // border-right: 1px solid #ccc;
 
        box-sizing: border-box;
        &:last-child {
          border-right: none;
        }
      }
    }
    .selected {
      background-color: rgba(0, 87, 255, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .preSelected {
      background-color: rgba(255, 148, 49, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .unSelected {
      background-color: #ffffff;
      border-bottom: 1px solid #ccc;
    }
  }
}
.tips {
  // width: auto;
  border-radius: 4px;
  line-height: 30px;
  border: 1px solid #1890ff;
  background: rgba(53, 158, 255, 0.05);
  padding: 5px 20px;
  position: absolute;
  .times {
    margin-right: 0px;
  }
}
</style>

带有样式回显的：

<!--
 * @FileDescription:轴选择器：对有所帮助的朋友点个关注再走呀！！！！
 * @Author: -----------
 * @LastEditors: ---------
-->
<template>
  <div style="margin-bottom: 50px;">
    <div class="hours-container">
      <div v-for="(item, index) in hours"
           :key="index"
           class="hours-item">
        <div class="hours-item-value"
             style="border-right:1px solid #ccc">
          <div :class="compClass(12 * item)"
               @click="handleClick(12 * item)"
               @mouseover="handleHover(12 * item)"></div>
          <div :class="compClass(12 * item + 1)"
               @click="handleClick(12 * item + 1)"
               @mouseover="handleHover(12 * item + 1)"></div>
          <div :class="compClass(12 * item + 2)"
               @click="handleClick(12 * item + 2)"
               @mouseover="handleHover(12 * item + 2)"></div>
          <div :class="compClass(12 * item + 3)"
               @click="handleClick(12 * item + 3)"
               @mouseover="handleHover(12 * item + 3)"></div>
          <div :class="compClass(12 * item + 4)"
               @click="handleClick(12 * item + 4)"
               @mouseover="handleHover(12 * item + 4)"></div>
          <div :class="compClass(12 * item + 5)"
               @click="handleClick(12 * item + 5)"
               @mouseover="handleHover(12 * item + 5)"></div>
          <div :class="compClass(12 * item + 6)"
               @click="handleClick(12 * item + 6)"
               @mouseover="handleHover(12 * item + 6)"></div>
          <div :class="compClass(12 * item + 7)"
               @click="handleClick(12 * item + 7)"
               @mouseover="handleHover(12 * item + 7)"></div>
          <div :class="compClass(12 * item + 8)"
               @click="handleClick(12 * item + 8)"
               @mouseover="handleHover(12 * item + 8)"></div>
          <div :class="compClass(12 * item + 9)"
               @click="handleClick(12 * item + 9)"
               @mouseover="handleHover(12 * item + 9)"></div>
          <div :class="compClass(12 * item + 10)"
               @click="handleClick(12 * item + 10)"
               @mouseover="handleHover(12 * item + 10)"></div>
          <div :class="compClass(12 * item + 11)"
               @click="handleClick(12 * item + 11)"
               @mouseover="handleHover(12 * item + 11)"></div>
        </div>
        <div class="hours-item-header">
          <span v-if="index === 0 || index === 24">{{ timeHours[index] }}</span>
        </div>
      </div>
    </div>
    <div class="tipss color999 font12 fontw ">
      <i class="el-icon-warning font14"></i>操作提示：点击向右滑动为选中，反之取消。
    </div>
    <div class="tips"><span class="color999">已选时间段：</span>
      <span class="fontw 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: []
    // },
    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: [],
      // 实现编辑时回显
      flag:true
    }
  },
  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 = 12 * parseInt(startHour);
            } else {
              startNum = 12 * parseInt(startHour) + 1;
            }
            if (endMin === '00') {
              endNum = 12 * parseInt(endHour) - 1;
            } else {
              endNum = 12 * 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] * 12; index < 12 * (len + 1); index++) {
        if (this.timeRangeListIndex.indexOf(index) > -1) {
          // 如果有开始时间，直接确定结束时间
          if (startTime) {
            // debugger
            this.endHour = Math.floor((index + 1) / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
            }
          } else {
            // 没有开始时间，确定当前点为开始时间
            // debugger
            this.startHour = Math.floor(index / 12);
            let startTimeAll = 5 * (index % 12) === 5 ? '05' : 5 * ((index) % 12)
            this.startMin = index % 12 === 0 ? "00" : startTimeAll;
            startTime = `${this.startHour < 10 ? '0' + this.startHour : this.startHour}:${this.startMin}`;
          }
          // 如果是最后一格，直接结束
          if (index === 12 * this.hours.length + 1) {
            endTime = `${Math.floor((index + 1) / 12)}: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) {
            // 这里可能只选半个小时
            this.endHour = Math.floor(index / 12);
            //判断是否重复选择选择下标开始结束时间
            if (this.endHour === this.startHour) {
              let endTimeAll = 5 * ((index) % 12) === 5 ? '05' : 5 * ((index) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            } else {
              let endTimeAll = 5 * ((index + 1) % 12) === 5 ? '05' : 5 * ((index + 1) % 12)
              this.endMin = (index + 1) % 12 === 0 ? "00" : endTimeAll;
              endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.endMin}`;
              this.timeRangeList.push(`${startTime}-${endTime}`);
              startTime = '';
              endTime = '';
            }
            // let endtimeAll = 15 * ((index + 1) % 4)
            // this.endMin = index % 4 === 0 ? "00" : endtimeAll;
            // endTime = `${this.endHour < 10 ? '0' + this.endHour : this.endHour}:${this.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';
        }
      }
      // 实现编辑回显,(只编辑回显样式的,时间回显可以让后端返回)不清楚为什么直接不显示,选择加了一个定时器，使用flag防止多次遍历循环生成
      setTimeout(()=>{
        if(this.flag){
        this.getEditType()
      }
      })
      return this.timeRangeListIndex.indexOf(index) > -1 ? 'hours-item-left selected' : 'hours-item-left';
    },

    getEditType(){
      // this.timeRangeListIndex可以传给后端，回显时返回，我们那个后端没让我传这个值,只让我传了时间段，不过他计算过后把这个值返还给我了
      // 后端大概思路:该时间选择器一共分成了288份，288/24=12,一小时占12份，一份就为5分钟，通过时间段算得到这个值
      this.timeRangeListIndex=[1,2,3,4,5,6,7,8,9,10,11,12]
      // 一定要把flag变为false,否则会无线循环浏览器崩溃
      this.flag=false
    },
    compItem (item) {
      // 不足10前面补0
      return item < 10 ? `0${item}` : item;
    },
 
  },
  mounted () {
    this.transformedIndex();
    this.transformedSection();
  }
}
</script>
 
<style lang="scss" scoped>
.hours-container {
  margin-left: 1.5%;
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  .hours-item {
    width: 4%;
    height: 45px;
    // border: 1px solid #c2d0f3;
    border-right: none;
    text-align: center;
    &:last-child {
      .hours-item-value {
        display: none;
      }
      .hours-item-header {
        border-top: none;
        margin-top: 12px;
        margin-left: -25px;
      }
    }
 
    .hours-item-header {
      text-align: left;
      position: relative;
      margin-left: -20%;
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-top: 1px solid #ccc;
 
      &:last-child {
        width: 150%;
      }
    }
    .hours-item-value {
      width: 100%;
      height: 12px;
      box-sizing: border-box;
      display: flex;
      &:first-child {
        border-left: 1px solid #ccc;
      }
      &:last-child {
        border-right: 1px solid #ccc;
      }
      .hours-item-left,
      .hours-item-right {
        width: 50%;
        height: 11px;
        margin-top: 1px;
        // border-right: 1px solid #ccc;
 
        box-sizing: border-box;
        &:last-child {
          border-right: none;
        }
      }
    }
    .selected {
      background-color: rgba(0, 87, 255, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .preSelected {
      background-color: rgba(255, 148, 49, 0.4);
      border-bottom: 1px solid #ccc;
    }
    .unSelected {
      background-color: #ffffff;
      border-bottom: 1px solid #ccc;
    }
  }
}
.tips {
  // width: auto;
  border-radius: 4px;
  line-height: 30px;
  border: 1px solid #1890ff;
  background: rgba(53, 158, 255, 0.05);
  padding: 5px 20px;
  position: absolute;
  .times {
    margin-right: 0px;
  }
}
</style>

参考连接：

Vue 会议室时间选择器，可点选时间轴，时间选择器_麋麋鹿的博客-CSDN博客_时间轴选择器

weixin_45776308
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue日期时间选择组件_强大且易于使用的Vue组件日期时间选择器
cuk5340的博客
07-26 3935
vue日期时间选择组件 Vue日期时间选择器 (Vue Datetime Picker) Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-hour time, inlin...
vue组件 -- 实现一种小时级时间段选择
dengkangning1111的博客
01-25 2793
效果 操作大概是选择一个开始时间和一个结束时间（从左往右选是选择，从右往左是取消），排除已选后计算他们总的时间段。 code <template> <div> <div class="hours-container"> <div v-for="(item, index) in hours" :key="index" class="hours-item"> <div class="hours-item-header.
vue iviewui DatePicker时间选择器，限制小时分钟秒
here_s的博客
05-11 2191
<DatePicker type=“datetime” format=“yyyy-MM-dd HH:mm” placeholder=“结束时间” :timePickerOptions=“timePickerOptions”//注意这里 style=“width:100%;” v-model=“tableData.form.endTime” 把分钟做限制 直接在data里面 timePickerOptions: { steps: [1, 5] },//时间做限定5分钟倍数，秒同理 这里只做分的限
Vue3的时间段日期区间选择器,以一天24小时中每半小时为单位,（完善时间回显）
最新发布
weixin_43373009的博客
04-29 460
2、效果2展示，代码加了挺多的（所以重新发一次完整代码），经过表的时候悬停时1.5s后在鼠标位置的右下方出现提示选择的时间，移出表、选择或移动的就取消提示。a、用原版本鼠标的画框的效果出不来，调试摸了很久才改好， pointerEvents: 'none'，要在画框的div加上这个才可以然后。因为工作需要，项目时间比较紧张，需要用到较为复杂的时间段的选择器，所以手搓不太现实，研究了两三天，最总找到类似的（b、在表单的右上角新增了hover移入表才出现清空的x图标，去阿里巴巴图库找的图片。
vue+elementui实现日期时间控件分钟固定步长（完整案例及效果图）.zip
02-15
1、vue+elementUI实现日期时间控件的分钟步长设置； 2、完整的代码示例； 3、清晰的示例图片
vue:时间选择器自定义时间可选范围
zq_IT的博客
03-01 2453
vue:el-date-picker时间自定义选择时间范围注：该方法需写再计算属性中 时间自定义选择时间范围 <el-date-picker style="width:100%" vModel={data['yearStart']} picker-options={this.pickerStartOptions('listQuery')}
Vue企业级时间轴选择器
08-09
时间范围选择插件 取当前时间之前一段时间范围 按刻，小时，天分类
Vue 用Vant实现时间选择器的示例代码
10-16
在Vue.js框架中，Vant是一个轻量级的UI组件库，它提供了丰富的组件和设计样式，便于开发者快速构建移动应用。...在实际项目中，你可以根据需要调整时间选择器的类型（如年月日、小时分钟等），并添加更多的定制功能。
Vue实现可移动水平时间轴
10-15
一个水平时间轴通常包含一系列的里程碑或事件，每个事件都有一个特定的时间点，并且用户可以通过拖动或点击导航按钮来移动时间轴，查看不同时间段的数据。在这个场景中，Vue.js的响应式特性可以帮助我们轻松地处理...
基于vue封装好的时间轴组件
06-13
适用于地图实时更新数据、底部的时间轴、基于vue封装
VUE-任务进程（时间轴）
10-09
公司提出一个需求，要求写一个任务进程组件用于监控工作时间内任务完成情况。包括任务状态，任务起止时间，当前时间线，任务是否延迟开始。 压缩包中不包含node_modules,请下载后自行安装相关插件
vuejsTime横向时间年月日星期插件
04-17
jq22vuejsTime横向时间年月日星期插件
Ant Design of Vue 时间选择器实现时分秒时间段选择（disabledHours、disabledMinutes、disabledSeconds、禁用时间）
liona_koukou的博客
05-22 1万+
最终实现按效果如下：即实现时分秒时间段的选择，结束时间要大于开始时间 使用了disabledHours、disabledMinutes、disabledSeconds来实现禁用时间 完整组件代码如下：可直接引用运行查看效果 <template> <div class="select-range-time"> <a-row style...
vue中时间控件
EstherNi的博客
10-26 647
vue中时间控件
vue时间选择器
热门推荐
Marshall_Ma的博客
04-18 2万+
NUTUI VUE时间选择器
【前端】vue-slider实现可设置选择范围的时间轴
洛尧的博客
11-23 4248
一开始用的el-slider，提了这个需求以后开始查文档改，到最后发现，element的slider居然可以样式和绑定的value不一致。最后看到了vue-slider的范围模式，实现了设置不可选范围，将时间轴分两段。加cursor: auto;屏蔽固定滑块的cursor:not-allowed，不显示禁止符号。截图截不到第二个滑块上大大的 cursor: not-allowed 标志。绝不会超过设定值，使用键盘左右键也不会超过，点图标右回到1。
vue3 时间轴选择某个时间段
sbb0_0的博客
09-26 339
【vue3】时间轴选择某段时间
vue.js水平时间轴_用Vue.js制作的简单水平时间轴组件
cuk5239的博客
07-29 4876
vue.js水平时间轴 Vue水平时间线 (Vue Horizontal Timeline) a simple horizontal timeline component made with Vue.js. 一个由Vue.js制作的简单水平时间轴组件。 View Demo 查看演示 View Github 查看Github 如何安装 (How to install) npm (npm) ...
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件
见贤思齐焉，见不贤内自省
03-17 1085
Vue2使用v-model封装ElementUI_DatePicker 日期选择器组件
vue 横向时间轴选择器
04-11
Vue横向时间轴选择器是一种用于在网页上展示时间轴并进行选择的组件。它通常用于展示一段时间内的事件或任务，并允许用户通过拖动或点击来选择特定的时间点。 在Vue中，可以使用第三方库或自定义组件来实现横向时间轴选择器。以下是一个简单的实现方式： 1. 创建一个Vue组件，命名为TimelineSelector。 2. 在组件中定义一个data属性，用于存储时间轴的数据和当前选择的时间点。 3. 在组件的模板中使用v-for指令遍历时间轴数据，生成时间轴上的每个时间点。 4. 使用v-bind指令将每个时间点与选择的时间点进行绑定，以便在用户选择时更新选择的时间点。 5. 使用v-on指令监听用户的拖动或点击事件，并更新选择的时间点。 6. 可以添加样式和动画效果来美化时间轴选择器。 这只是一个简单的实现方式，具体的实现方式可能会根据需求和使用的第三方库而有所不同。你可以根据自己的需求选择合适的组件或库来实现横向时间轴选择器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值