vue中一周的时间选择多个阶段（手动表格选择）

最新推荐文章于 2024-07-17 16:07:44 发布
最新推荐文章于 2024-07-17 16:07:44 发布
阅读量3k 收藏 25
点赞数 6
分类专栏： Vue 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyp_1/article/details/106358159
版权

前言

先给大家看一下效果图
在这里插入图片描述
相信有很多的小伙伴项目中可能会需要到这个功能膜块，那么你很幸运，遇到了我这一篇，直接复制过去就可以使用，如果有不懂的地方可以再下方评论，我会及时回复的，还有就是关于初始默认时候的设置，在里面没有写到，因为比较复杂，如果有小伙伴进行到那一步了，可以跟我私信的

代码


<template>
  <div class="byted-weektime" @mousedown="dian" @mousemove="yi" @mouseup="li">
    <div class="calendar">
      <table class="calendar-table" style="width:610px">
        <thead class="calendar-head">
          <tr>
            <th rowspan="6" class="week-td">星期/时间</th>
            <th colspan="24">00:00 - 12:00</th>
            <th colspan="24">12:00 - 24:00</th>
          </tr>
          <tr>
            <td colspan="2" v-for="(item,index) in tableHeader" :key="index">{{item}}</td>
          </tr>
        </thead>
        <tbody id="tableBody">
          <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>
          <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]"
              :key="i"
            ></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]"
              :key="i"
            ></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]"
              :key="i"
            ></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]"
              :key="i"
            ></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]"
              :key="i"
            ></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]"
              :key="i"
            ></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]"
              :key="i"
            ></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" :key="index" v-show="item.length">
                <span>{{weekDate[index+1]}}:</span>
                <strong>
                  <span>{{item}}</span>
                </strong>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 鼠标的画框的效果 -->
    <div
      id="container"
      v-bind:style="{backgroundColor:back,
            height:h+'px',
            width:w+'px',
            position:'absolute',
            left:left+'px',
            top:top+'px',
            opacity:0.2,
            border:len+'px dashed #000',
            zIndex:-1}"
    ></div>
  </div>
</template>

<script>
export default {
  name: "timeSelect",
  data() {
    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: [], //选中的时间段原始数据
      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
      },
      py: "",
      px: "",
      back: "#31676f",
      h: "",
      w: "",
      top: "",
      left: "",
      len: 0
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      for (let i = 0; i < 7; i++) {
        let arr = [];
        for (let j = 0; j < 48; 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;
    },
    dian(event) {
      // console.log(event);
      this.px = event.pageX; //获取x坐标
      this.py = event.pageY;
    },
    yi(event) {
      if (this.px == "" || this.py == "") {
        return;
      }
      var px1 = this.px;
      var px2 = this.py;
      this.left = event.pageX;
      this.top = event.pageY;
      this.h = this.top - this.py;
      this.w = this.left - this.px;
      var hc = -this.h;
      var wc = -this.w;
      this.len = 1;
      this.back = "#31676f";
      if (this.h < 0 && this.w >= 0) {
        // console.log(1);
        this.h = hc;
        this.left = px1;
      } else if (this.h >= 0 && this.w < 0) {
        // console.log(2);
        this.w = wc;
        this.top = px2;
      } else if (this.h < 0 && this.w < 0) {
        // console.log(3);
        this.h = hc;
        this.w = wc;
      } else {
        // console.log(4);
        this.left = this.px;
        this.top = this.py;
      }
      if (this.w < 0) {
        this.w = 0 - this.w;
      }
      if (this.h < 0) {
        this.h = 0 - this.h;
      }
    },
    li() {
      this.px = "";
      this.py = "";
      this.h = "";
      this.w = "";
      this.top = "";
      this.left = "";
      this.len = 0;
      this.back = "";
    },
    handleMouseUp(i, day) {
      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;
      }
      //当点击事件是在table内才触发选取数据操作
      if (this.downEvent) {
        //选时间段
        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++) {
              if (this.rowUnit[x][y].class == "ui-selected") {
                this.rowUnit[x][y].class = null;
                var c = this.rowUnit[x][y].timeData;
                var kong = "";
                for (let i = 0; i < this.timeContent[x].arr.length; i++) {
                  if (c == this.timeContent[x].arr[i]) {
                    kong = i;
                  }
                }
                console.log(kong);
                this.timeContent[x].arr.splice(kong, 1);
              }
            }
          }
        }
        //过滤时间段,将临近的时间段合并
        this.filterTime(dayStart, dayEnd);
      }
      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] / 2);
          arr3.push(arr[arr.length - 1] / 2 + 0.5);
          arr2.push(arr3);
        });
        this.timeStr[i] = timeToStr(arr2);
        this.timeSection[i] = arr2;
      }
      // console.log(this.timeSection)
    },
    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
    },
  }
};
</script>

<style scoped>
.byted-weektime .calendar {
  -webkit-user-select: none;
  position: relative;
  display: inline-block;
}
#tableBody {
  /* position: relative; */
}
/*.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;

  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;
}
</style>

结语

希望这个小功能对你有所帮助，有什么问题或者看不懂的地方就在下方评论，我会及时回复的

A_Qyp
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 30
    评论
专栏目录
用vue做一个星期每一天的时间段选择
weixin_67898309的博客
04-17 488
对应星期做分段时间选择
vue 实现移动端年周时间选择
每日秃头
07-22 1534
vue 实现移动端年周时间选择使用组件样式实现代码实现 使用组件 添加链接描述 样式实现 代码实现 <template> <div id="root"> <van-nav-bar left-arrow @click-left="returnHandle()"> <template #title> <span class="nav-title">统计分析</
vue中实现一个时间选择器的级联框，第一层小时，第二层分钟
韩旭不会敲代码吧的博客
06-04 550
vue中实现一个时间选择器的级联框，第一层小时，第二层分钟
vue时间段选择器
qq_34415621的博客
10-31 6090
vue时间段选择器实现的功能![在这里插入图片描述](https://img-blog.csdnimg.cn/20191031084355506.gif)代码心得 实现的功能 可以添加和取消时间段,需要把选中的时间段数组再转成适合人看的格式. 代码 没有整理和优化,但保证可用,还差画方框的程序需要调整 <template> <div class="byted-weektime"...
在vue中，实现上一周，下一周的选择（非插件）
yjy528的博客
04-16 2420
因业务需要，需要在vue项目中做一个个性化的周表，查询了一些插件，基本上都是横向为周，纵向为时间点，改了半天均以失败告终。然后找到一篇js实现上下周的文章（https://blog.csdn.net/long5693525/article/details/51084944），作者随缘的一个人，放在vue项目中稍加改动，逻辑没有太看懂，但是效果有了，就暂时用着了 以下是代码： <te...
vue2中一周的时间选择多个时间点 手动表格框选
最新发布
m0_58234730的博客
07-17 119
使用vue2 elementui 鼠标框选单元格 一周的时间选择多个阶段
Vue 项目中 使用fullcalendar 时间段选择插件（类似课程表格）
热门推荐
小鹏要逆袭的博客
05-16 1万+
最近完成一个项目，有这样的需求，我们需要选择一个会议室，但是最好能够通过在图上显示出该 会议室在某某时间段内已经被预定了。 先看一下这个功能最终实现的效果，看一看是不是你想要的效果，是您需要的请继续读下去，如果不是请忽略本文。 本文中是基于VUE+elementui项目中实现的前后端分离的前端功能部分： 所使用的插件：https://github.com/fullcalendar/ful...
vue中合并elementui日期和时间选择器
qq_41956361的博客
01-09 3514
引言:我们经常使用elementl里的el-date-picker和el-time-picker标签但是有时候有需求需要获取一个完整的年月日分时秒的时候我们的标签就有局限了需要我们手动处理数据 代码 <el-form-item label="检测时间"> <el-col :span="11"> //选择的日期 <el-date-picker type="date" placeholder="选择日期" v-model="forms.tart_time.
antd vue 多个下拉 联动_Antd的Table组件嵌套Table以及选择框联动操作
weixin_34270007的博客
12-23 1492
一、需求在使用Table组件嵌套Table时，父子Table的选择框需要联动，即父Table选中，该行下的子Table需要全选中，某一个子Table全部选中，则该子Table所在的父Table那一行也需要选中。二、Table的rowSelection配置父子Table联动，就不能使用OnChange，需要使用OnSelect以及OnSelectAll手动配置。selectedRowKeys：指定选...
vue 多了一层div_Vue template 如何支持多个根结点
weixin_39969953的博客
12-19 871
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。如果你试图创建一个没有根结点的 Vue template，像这样：Node 1Node 2不出意外的话你会得到一个编译错误或者运行时错误，因为 template 必须只有一个根元素。通常你可以在外面套一个div容器来解决。这个容器元素没有显示上的作用，只是为了满足模板编译的单个根节点的要求。Node 1Node 2通常情...
详解Vue template 如何支持多个根结点
11-20
在 React 中，为了解决这个问题，引入了 Fragments，使得在组件中可以返回多个根节点，而无需额外的包裹元素。在 Vue 中，尽管目前官方并没有提供类似于 React Fragments 的功能，但我们可以通过其他方法来实现类似...
vue中element-ui表格缩略图悬浮放大功能的实例代码
08-27
在Vue.js中，Element UI是一个流行的前端UI框架，它的组件丰富多样，能够帮助开发者快速构建出美观的用户界面。在一些场景下，我们可能需要在表格中展示图片，并且希望在鼠标悬停在图片缩略图上时实现图片放大显示的...
vue3生成word表格
05-10
在生成Word表格时，我们可以先定义好一个基本的表格结构，然后通过Vue的数据绑定方式将数据填充到对应的单元格中。 #### 3. 动态数据加载 在实际应用中，我们需要根据不同的条件动态加载数据并更新Word表格内容。...
一个基于vue的在线动态简历将来面试装逼用
08-09
在简历中，可能有多个组件需要访问和修改同一份数据，如教育背景或技能列表，Vuex可以帮助我们更好地组织这些状态。 此外，Vue CLI（命令行工具）可能被用来初始化和构建项目，它提供了开箱即用的脚手架，包括自动...
复杂多表头excel表格的导出及布局，支持拓展
02-22
本知识点将深入探讨如何在Excel中创建和导出复杂多表头的表格，并支持进一步的拓展。 首先，多表头的设置是为了更好地分类和展示数据。在Excel中，可以利用合并单元格和嵌套表格头来实现这一目标。例如，对于一个...
element中设置5栏布局
qyp_1的博客
07-30 4174
前言 这篇文章给小伙伴们说的是在使用element这个UI库的时候，它里面有Layout 布局，但是如果没有自己设置的话，它只能分为24的因数，就比如3、4、6这种布局，但是我们在开发的时候，还会碰到5或者7这样的布局，那么就很头痛了。我想很多小伙伴应该和我一样，输入4.8，但是这是没有用的，那么今天我来给大家站展示一下怎么解决5栏布局的问题 1、原理讲解 先随手写一个普通的4栏布局，进入控制台，大家会发现 然后就比较清晰了思路，我们会发现:span="6"，到控制台中的class就是el-col-6，那
vue中监听本地储存的值变化
qyp_1的博客
11-24 3512
前言 这个操作是在vue中一个组件的值发生变化，从而别的组件都可以监听到，从而发生一系列的操作，是这样的一个功能，也是挺实用的。要达成这个功能的前提是得存到本地才能产生监听的效果 一、在main中配置代码 Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'data') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('S
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值