vue实现时间段选择组件，分星期，最小粒度小时

已于 2022-12-30 15:52:45 修改
阅读量1.5k 收藏 7
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2022-12-29 15:30:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcc_2269861428/article/details/128482490
版权 

<template>
  <div class="app-container">
    <div id="tim" class="byted-weektime">
      <div class="calendar">
        <div id="box">
          <div id="kuang" :style="{width:kuangObj.width+'px',height:kuangObj.height+'px',top:kuangObj.top+'px',left:kuangObj.left+'px',bottom:kuangObj.bottom+'px',right:kuangObj.right+'px'}"></div>
          <table class="calendar-table" style="width:800px">
            <thead class="calendar-head"><tr>
              <th rowspan="6" class="week-td">星期/时间</th>
              <th colspan="24">00:00 - 23:00</th>
            <tr>
              <td colspan="1" v-for="index in tableHeader">{{index}}</td>
            </tr>
            </thead>
            <tbody id="tableBody">
            <tr>
              <td>星期一</td>
              <td @mousedown.prevent="handleMouseDown(i,0)" @mouseup.prevent="handleMouseUp(i,0)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[0]"></td>
            </tr>
            <tr>
              <td>星期二</td>
              <td @mousedown.prevent="handleMouseDown(i,1)" @mouseup.prevent="handleMouseUp(i,1)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[1]"></td>
            </tr>
            <tr>
              <td>星期三</td>
              <td @mousedown.prevent="handleMouseDown(i,2)" @mouseup.prevent="handleMouseUp(i,2)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[2]"></td>
            </tr>
            <tr>
              <td>星期四</td>
              <td @mousedown.prevent="handleMouseDown(i,3)" @mouseup.prevent="handleMouseUp(i,3)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[3]"></td>
            </tr>
            <tr>
              <td>星期五</td>
              <td @mousedown.prevent="handleMouseDown(i,4)" @mouseup.prevent="handleMouseUp(i,4)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[4]"></td>
            </tr>
            <tr>
              <td>星期六</td>
              <td @mousedown.prevent="handleMouseDown(i,5)" @mouseup.prevent="handleMouseUp(i,5)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[5]"></td>
            </tr>
            <tr>
              <td>星期日</td>
              <td @mousedown.prevent="handleMouseDown(i,6)" @mouseup.prevent="handleMouseUp(i,6)" class="calendar-atom-time" :class="item.class" v-for="(item,i) in rowUnit[6]"></td>
            </tr>

            <tr>
              <td colspan="49" class="td-table-tip">
                <div class="clearfix">
                  <span class="pull-left tip-text">请用鼠标点选时间段</span> <a @click="clear" class="pull-right"> 清空</a>
                </div>
              </td>
            </tr>
            <!--<tr>
              <td colspan="49" class="timeContent">
                <div v-for="(item,index) in timeStr" v-show="item.length">
                  <span>{{weekDate[index+1]}}: </span>
                  <strong><span>{{item}}</span></strong>
                </div>
              </td>
            </tr>-->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AppleTimmer',
  props: ['timmer'],
  data() {
    Array.prototype.remove = function(varElement)
    {
      var numDeleteIndex = -1;
      for (var i=0; i<this.length; i++)
      {
        // 严格比较，即类型与数值必须同时相等。
        if (this[i] === varElement)
        {
          this.splice(i, 1);
          numDeleteIndex = i;
          break;
        }
      }
      return numDeleteIndex;
    };
    return {
      tableHeader:['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
      weekDate:{'1':'星期一','2':'星期二','3':'星期三','4':'星期四','5':'星期五','6':'星期六','7':'星期日'},
      rowUnit:[],
      timeContent:[{"arr":[]},{"arr":[]},{"arr":[]},{"arr":[]},{"arr":[]},{"arr":[]},{"arr":[]}],
      timeSection:[],
      timeStr:[],
      beginDay:0,
      beginTime:0,
      downEvent:false,
      kuangObj:{
        width:0,
        height:0,
        top:0,
        left:0,
        bottom:0,
        right:0,
        oldLeft:0,
        oldTop:0,
        flag:false
      }
    }
  },
  created(){
    this.init();
  },
  watch:{
    timmer(newValue,oldValue){
      if(newValue){
        this.timeContent = newValue;
        this.historyData();
      }

    },
  },
  mounted(){
    this.timeContent = this.timmer;
    this.viewData();
    var oBox = document.getElementById("tim");

    var oDiv = document.getElementById("kuang");
    //鼠标按下，获取初始点
    oBox.onmousedown = function (ev) {
      ev = window.event || ev;
      //1.获取按下的点
      var x1 = ev.pageX - $("#tim").offset().left;
      var y1 = ev.pageY - $("#tim").offset().top;
      oBox.onmousemove = function (ev) {
        ev = window.event || ev;
        var x2 = ev.pageX - $("#tim").offset().left;
        var y2 = ev.pageY - $("#tim").offset().top;
        //3.设置div的样式
        oDiv.style.left = ((x2 > x1 ? x1 : x2)-10) +"px";
        oDiv.style.top = ((y2 > y1 ? y1 : y2)-10) +"px";
        oDiv.style.width = (Math.abs(x2-x1))+"px";
        oDiv.style.height =(Math.abs(y2-y1))+"px";
      }
      oBox.onmouseup = function (ev) {
        oBox.onmousemove = null;
        oDiv.style.left = 0 +"px";
        oDiv.style.top = 0 +"px";
        oDiv.style.width = 0+"px";
        oDiv.style.height =0+"px";
      }
      return false;  //解除在划动过程中鼠标样式改变的BUG
    }
    document.onmouseup = function () {
      oBox.onmousemove = null;
    }
  },
  methods: {
    // 回显父组件传递过来的数据
    historyData(){
      this.timeContent = this.timmer;
      this.viewData();
      var oBox = document.getElementById("tim");

      var oDiv = document.getElementById("kuang");
    },
    init(){
      for (let i = 0; i < 7; i++) {
        let arr = []
        for (let j = 0; j < 24; j++) {
          arr.push({class:null,timeData:j});
        }
        this.rowUnit.push(arr);
        this.timeContent.push({arr:[]});
        this.timeSection.push([]);
        this.timeStr.push('');
      }
    },
    handleMouseDown(i,day){
      this.downEvent = true //按下时鼠标不在范围内则不算
      this.beginDay = day
      this.beginTime = i
    },
    handleMouseUp(i,day){
      //当点击事件是在table内才触发选取数据操作
      if (this.downEvent) {
        //选时间段
        let _this = this
        let begin = this.beginTime
        let start = begin <= i ? begin : i //x轴 起点
        let length = Math.abs(begin - i)
        let end = start + length           //x轴 终点

        let dayStart = this.beginDay <= day ? this.beginDay : day //y轴 起点
        let dayLength = Math.abs(this.beginDay - day)
        let dayEnd = dayStart + dayLength                         //y轴 终点
        //当框选范围内所有块都是选中状态时,执行反选
        function isAdd() {
          for (let x = dayStart; x < dayEnd+1; x++) {
            for (let y = start; y < end+1; y++) {
              if(_this.rowUnit[x][y].class == null) return true
            }
          }
          return false
        }

        if (isAdd()) {
          //没选中的全都选上
          for (let x = dayStart; x < dayEnd+1; x++) {
            for (let y = start; y < end+1; y++) {
              if(this.rowUnit[x][y].class == null) {
                this.rowUnit[x][y].class = 'ui-selected'
                this.timeContent[x].arr.push(this.rowUnit[x][y].timeData)
              }
            }
          }
        }else{ //反选
          for (let x = dayStart; x < dayEnd+1; x++) {
            for (let y = start; y < end+1; y++) {
              this.rowUnit[x][y].class = null
              this.timeContent[x].arr.remove(this.rowUnit[x][y].timeData)
            }
          }
        }
        //过滤时间段,将临近的时间段合并
        this.filterTime(dayStart,dayEnd)
        //this.$emit('getTimmer',this.timeContent);
      }
      this.downEvent = false
    },
    filterTime(start,end) {  //选中的x,y坐标信息 x:0-47  y:0-6
      function sortCut(arr) {  //提取连续的数字
        var result = []
        arr.forEach(function (v, i) {
          var temp = result[result.length - 1];
          if (!i) {
            result.push([v]);
          } else if (v % 1 === 0 && v - temp[temp.length - 1] == 1) {
            temp.push(v)
          } else {
            result.push([v])
          }
        });
        return result
      }
      function toStr(num) {
        if (Number.isInteger(num)) {
          let str = num<10 ? ('0'+num) : num.toString()
          return str+':00'
        }else{
          let str =Math.floor(num)<10 ? ('0'+Math.floor(num)) : Math.floor(num).toString()
          return str+':30'
        }
      }
      function timeToStr(arr) {  //把数组转成方便人看到字符串
        let str = ''
        arr.forEach((arr,index)=>{
          let str1 = ''
          if (index == 0) {
            str1 = toStr(arr[0]) + '~' + toStr(arr[1])
          }else{
            str1 = ' , ' + toStr(arr[0]) + '~' + toStr(arr[1])
          }
          str += str1
        })
        return str
      }
      //排序,分割成
      for (let i = start; i < end+1; i++) {
        let arr1 = sortCut(this.timeContent[i].arr.sort((a, b) => a - b))
        let arr2 = []
        arr1.forEach((arr)=>{   //转成带小数点的时间段,以及供前端显示的字符串
          let arr3 = []
          arr3.push(arr[0])
          arr3.push(arr[arr.length-1])
          arr2.push(arr3)
        })
        this.timeStr[i] = timeToStr(arr2)
        this.timeSection[i] = arr2
      }
    },
    clear(){
      this.rowUnit.forEach((item)=>{
        item.forEach((item1)=>{
          item1.class=null
        })
      })
      this.timeContent.forEach((item)=>{
        item.arr = []
      })
      this.timeSection.forEach((item)=>{
        //赋值成空数组[]出问题
        item.length = 0
      })
      //遍历赋值成'',不管用
      this.timeStr.length = 0
      for (let i = 0; i < 7; i++) {
        this.timeStr.push('')
      }
      //this.initState = true
    },
    //画框操作
    kuangMove(){
      if(!this.kuangObj.flag) return
      if (this.downEvent) {
        let x1 = this.kuangObj.oldLeft
        let y1 = this.kuangObj.oldTop
        let x2 = event.layerX
        let y2 = event.layerY
        this.kuangObj.left = (x2 > x1 ? x1 : x2)
        this.kuangObj.top = (y2 > y1 ? y1 : y2)
        this.kuangObj.width = Math.abs(x2-x1)
        this.kuangObj.height =Math.abs(y2-y1)
      }
    },
    kuangDown(){
      this.kuangObj.flag = true
      this.kuangObj.oldLeft = event.layerX
      this.kuangObj.oldTop = event.layerY
    },
    kuangUp(){
      this.kuangObj.flag = false
      this.clearDragData()
    },
    kuangLeave(){
      this.kuangObj.flag = false
      this.clearDragData()
    },
    clearDragData(){
      for(let prop in this.kuangObj){
        this.kuangObj[prop] = 0
      }
    },
    // 回显数据
    viewData(){
      for(let i=0;i<this.timeContent.length;i++){
        if(this.timeContent[i].arr.length > 0){
          let temp = this.timeContent[i].arr;
          for(let j=0;j<temp.length;j++){
            for(let z=0;z<=24;z++){
              if(z == temp[j]){
                this.rowUnit[i][z].class = 'ui-selected';
                break;
              }
            }
          }
        }
      }
    }
  }
}
</script>
<style scoped>
  .byted-weektime .calendar{-webkit-user-select:none;position:relative;display:inline-block}
  /*.byted-weektime .calendar .schedule{background:#2F88FF;width:0;height:0;position:fixed;display:none;top:0;left:0;pointer-events:none;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;-ms-transition:all 400ms ease;transition:all 400ms ease}*/
  .byted-weektime .calendar .calendar-table{border-collapse:collapse;border-radius:4px}
  .byted-weektime .calendar .calendar-table tr .calendar-atom-time:hover{background:#ccc}
  .byted-weektime .calendar .calendar-table tr .ui-selected{background:#2F88FF}
  .byted-weektime .calendar .calendar-table tr .ui-selected:hover{background:#2F88FF}
  .byted-weektime .calendar .calendar-table tr,.byted-weektime .calendar .calendar-table td,.byted-weektime .calendar .calendar-table th{border:1px solid #ccc;font-size:12px;text-align:center;min-width:11px;line-height:1.8em;-webkit-transition:background 200ms ease;-moz-transition:background 200ms ease;-ms-transition:background 200ms ease;transition:background 200ms ease}
  .byted-weektime .calendar .calendar-table tbody tr{height:30px}
  .byted-weektime .calendar .calendar-table tbody tr td:first-child{background:#F8F9FA}
  .byted-weektime .calendar .calendar-table thead th,.byted-weektime .calendar .calendar-table thead td{background:#F8F9FA}
  .byted-weektime .calendar .calendar-table .td-table-tip{line-height:2.4em;padding:0 12px 0 19px;background:#fff !important}
  .byted-weektime .calendar .calendar-table .td-table-tip .clearfix{height:46px;line-height:46px}
  .byted-weektime .calendar .calendar-table .td-table-tip .pull-left{font-size:14px;color:#333333}
  .byted-weektime .week-td{width:75px;padding:20px 0}
  .byted-weektime a{cursor:pointer;color:#2F88FF;font-size:14px}
  #kuang{position: absolute;background-color: blue;opacity: 0.3;}
  #box{position: relative;}
</style>

引用处：

<AppleTimmer :timmer="timmer"/>

前方太黑暗
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue组件 -- 实现一种小时级时间段选择
dengkangning1111的博客
01-25 2833
效果 操作大概是选择一个开始时间和一个结束时间（从左往右选是选择，从右往左是取消），排除已选后计算他们总的时间段。 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:时间选择器自定义时间可选范围
zq_IT的博客
03-01 2471
vue:el-date-picker时间自定义选择时间范围注：该方法需写再计算属性中 时间自定义选择时间范围 <el-date-picker style="width:100%" vModel={data['yearStart']} picker-options={this.pickerStartOptions('listQuery')}
推荐开源项目：Vue-datepicker - 强大的Vue.js日期选择组件
最新发布
gitblog_00096的博客
06-11 369
推荐开源项目：Vue-datepicker - 强大的Vue.js日期选择组件 项目地址:https://gitcode.com/showonne/vue-date 在Web开发中，日期选择器是不可或缺的元素之一，它能帮助用户方便地选择和输入日期。今天，我们向您推荐一个精心打造的Vue.js日期选择组件：Vue-datepicker。这款组件不仅支持Vue.js 2.x，还提供了对Vue.js 1...
使用Vue写一个日期选择器
TianXuab的博客
07-17 2084
selectDate方法用于处理用户选择日期的逻辑，它将选定的日期格式化为'YYYY-MM-DD'的字符串，并更新selectedDate属性的值。Vue是一个流行的JavaScript框架，它提供了强大的工具和组件，使得开发日期选择器变得非常简单。在上面的代码中，我们定义了一个名为date-picker的组件，并在template中编写了用于呈现日期选择器的HTML代码。在上面的代码中，我们使用v-for指令循环遍历getCalendar方法返回的数组，并为每个日期创建一个div元素。
vue2和vue3分别实现：多个时间选择框，设置后边的时间必须大于前面的
weixin_47779983的博客
05-18 1186
vue2和vue3分别实现：多个时间选择框，设置后边的时间必须大于前面的
基于Vue的时间段日期区间选择器,每半小时为一段
Simplegif的博客
08-08 839
基于Vue的时间段日期区间选择器, 可用于时间选择, 时间段选择
ext拖动gridpanel的列组件消失_今日头条选择时间段组件封装(开箱即用)
weixin_39626745的博客
11-29 259
今日头条选择时间段组件封装你可能看到或是使用过今日头条的选择时间段组件，什么，你没有用过，请先看图线上演示地址：andt-components先解释一下选择器功能组件一周时段可选，没半个小时一个粒度，可以连续选择，可点选当鼠标拉开的选框是透明部分，松开鼠标可支持选择部分选中与取消已选时间段可以分段统计，如果连续累加，如果不连续逗号分隔选框可以8个方向拉伸，东，南，西，北，东北，东南，西北，西南当起...
vue时间选择组件.zip
08-20
1. **最小粒度为半小时**：这意味着用户可以选择的时间间隔最小为30分钟，这对于需要精确时间间隔的场景非常有用，如预订、调度或计费系统。 2. **滑动选择**：用户可以通过鼠标滑动快速选择连续的时间段，提高交互...
vue.js实现仿原生ios时间选择组件实例代码
10-20
本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码，具有一定的参考价值，有兴趣的可以了解一下。
Vue按时间段查询数据组件使用详解
10-14
总结来说，这个Vue组件展示了如何利用Ant Design Vue的日期选择器来实现按时间段查询数据的功能。它通过监听日期选择事件，更新查询参数，并将这些参数发送到后端接口进行数据检索。对于那些不理解的部分，如混入和...
vue实现城市列表选择功能
10-18
在Vue.js中实现城市列表选择功能，涉及到前端UI交互、数据获取、组件化开发等多个知识点。下面我们将逐一探讨这些关键点。 首先，我们要理解Vue组件化的概念。在上面的示例中，整个城市选择功能被划分为五个组件：`...
移动端日期时间选择控件
02-18
移动端日期时间选择控件
Vue实现点击时间获取时间段查询功能
08-27
本文主要介绍了使用 Vue 实现点击时间获取时间段查询功能的方法，旨在帮助开发者快速掌握该功能的实现方式。下面将详细介绍该功能的实现步骤和相关知识点。 一、使用 Vue 实现点击时间获取时间段查询功能的必要性 ...
datePicker一个或多个日期组件，如何快捷选择多个日期（时间段）
qq_42314621的博客
08-07 2007
【代码】datePicker一个或多个日期组件，如何快捷选择多个日期（时间段）
Vue 时间开始时间-结束时间选择器（年月日时分）编辑回显及表单验证
qq_39047060的博客
10-27 3550
vue时间段的选择及验证： <template> <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="120px" v-loading="loading" :element-loading-text="loadingText" > <el-row> <el-col :span="12">
用vue做一个星期每一天的时间段选择
weixin_67898309的博客
04-17 485
对应星期做分段时间选择
vue时间选择器
热门推荐
Marshall_Ma的博客
04-18 2万+
NUTUI VUE时间选择器
小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现
weixin_40797306的博客
07-30 1万+
前言 四个月前提起兴趣发表的这篇博客，两天劲头就过了，写的也是乱七八糟的，这次想真正的把博客建立起来，第一步要做的事情就是把这篇博客好好的改善一下，给过去一个好的交代，给未来一个好的开始。万事开头难，这次一定坚持下去。 一、功能演示说明 先详细的展示功能图片以及功能说明，以确保大家看到这里能确定功能是否是自己想要的。这是一个可以实现课程表、食谱等一些功能的周日...
vue中设置时间选择范围
过客璇璇的博客
10-15 3448
vue源码 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <div id="app"> <row> <i-col s...
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐
weixin_34107955的博客
06-22 558
前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有兴趣的且看看...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值