使用vue把一周的时间划分为可以选择多个阶段

提示：使用vue把一周的时间划分为可以选择多个阶段段（亲测有效）

一、直接复制以下代码

在这里插入图片描述

代码如下（示例）：


<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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/415834.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

理解计算着色器中glsl语言的内置变量

理解计算着色器中glsl语言的内置变量

概要 本文通过示例的方式&#xff0c;着重解释以下几个内置变量&#xff1a; gl_WorkGroupSizegl_NumWorkGroupsgl_LocalInvocationIDgl_WorkGroupIDgl_GlobalInvocationID 基本概念 局部工作组与工作项 一个3x2x1的局部工作组示例如下&#xff0c;每个小篮格子表示一个工作项…
阅读更多...
Web前端---图层嵌套与层叠三行三列效果

Web前端---图层嵌套与层叠三行三列效果

1.图层的嵌套设计 <!doctype html> <html> <head> <meta charset"utf-8"> <title>图层嵌套</title><style type"text/css">.inline_div{display:inline-block;}#wrap{width400px;height250px;border:2px solid…
阅读更多...
IO多路复用-select模型

IO多路复用-select模型

IO多路复用&#xff08;IO Multiplexing&#xff09;是一种高效的网络编程模型&#xff0c;可以同时监控多个文件描述符&#xff08;包括套接字等&#xff09;&#xff0c;并在有数据可读或可写时进行通知。其中&#xff0c;select模型是最常用和最早引入的一种IO多路复用模型。…
阅读更多...
09-认证-自研微服务框架

09-认证-自研微服务框架

认证 1. 开启https支持 func (e *Engine) RunTLS(addr, certFile, keyFile string) {err : http.ListenAndServeTLS(addr, certFile, keyFile, e.Handler())if err ! nil {log.Fatal(err)} }1.1 测试 证书生成&#xff1a; 安装openssl 网站下载&#xff1a;http://slproweb…
阅读更多...
k8s.gcr.io/pause:3.2镜像丢失解决

k8s.gcr.io/pause:3.2镜像丢失解决

文章目录 前言错误信息临时解决推荐解决onetwo 前言 使用Kubernetes&#xff08;k8s&#xff09;时遇到了镜像拉取的问题&#xff0c;导致Pod沙盒创建失败。错误显示在尝试从k8s.gcr.io拉取pause:3.2镜像时遇到了超时问题&#xff0c;这通常是因为网络问题或者镜像仓库服务器的…
阅读更多...
【Go语言】Go语言中的指针

【Go语言】Go语言中的指针

Go语言中的指针 变量的本质是对一块内存空间的命名&#xff0c;我们可以通过引用变量名来使用这块内存空间存储的值&#xff0c;而指针则是用来指向这些变量值所在内存地址的值。 注&#xff1a;变量值所在内存地址的值不等于该内存地址存储的变量值。 Go语言中&#xff0c;…
阅读更多...
[CSS]文字旁边的竖线以及布局知识

[CSS]文字旁边的竖线以及布局知识

场景&#xff1a;文字前面常见加竖线。 .center-title { 常见内容color: #FFF;font-family: "Source Han Sans CN";font-size: 50px;font-style: normal;font-weight: 700;line-height: normal;position: relative; 要定位left: 16px; 这里是想拉开间距margin-b…
阅读更多...
vmware中Numlock和caplock一直闪烁（更新时间24/2/28）

vmware中Numlock和caplock一直闪烁（更新时间24/2/28）

问题复现&#xff1a; 分析原因是&#xff1a;宿主机和vm虚拟机的这两个键未同步导致的异常 解决方法:将鼠标移动到点击虚拟机窗口以外的地方&#xff0c;按这两个键将其设置为打开状态即可解决
阅读更多...
科技赋能，MTW400A为农村饮水安全打通“最后一公里”

科技赋能，MTW400A为农村饮水安全打通“最后一公里”

日前&#xff0c;山东省政府纵深推进国家省级水网先导区建设&#xff0c;持续深化“水网”行动&#xff0c;着力构筑水安全保障网、水民生服务网、水生态保护网&#xff0c;建设水美乡村示范带、内河航运示范带、文旅融合示范带、绿色发展示范带&#xff0c;推动形成“三网四带…
阅读更多...
微服务架构 SpringCloud

微服务架构 SpringCloud

单体应用架构 将项目所有模块(功能)打成jar或者war&#xff0c;然后部署一个进程--医院挂号系统&#xff1b; > 优点: > 1:部署简单:由于是完整的结构体&#xff0c;可以直接部署在一个服务器上即可。 > 2:技术单一:项目不需要复杂的技术栈&#xff0c;往往一套熟悉的…
阅读更多...
目标检测——车辆数据集

目标检测——车辆数据集

一、背景介绍 VOC2005车辆数据集是PASCAL VOC挑战赛中的一个重要组成部分&#xff0c;该挑战赛始于2005年&#xff0c;旨在为计算机视觉领域的研究者和开发者提供一个统一的、标准化的评估平台。PASCAL VOC挑战赛不仅推动了图像识别、目标检测、图像分割等技术的发展&#xff…
阅读更多...
textbox跨线程写入

textbox跨线程写入

实现实例1 实现效果 跨线程实现 // 委托&#xff0c;用于定义在UI线程上执行的方法签名 //public delegate void SetTextCallback(string text);public void textBoxText(string text){// 检查调用线程是否是创建控件的线程 if (textBox1.InvokeRequired){// 如果不是&#…
阅读更多...
2.12冯诺依曼体系，各功能部件作用，简要工作流程

2.12冯诺依曼体系，各功能部件作用，简要工作流程

1)计算机由哪几部分组成&#xff1f;以哪部分为中心&#xff1f;2)主频高的CPU一定比主频低的CPU快吗&#xff1f;为什么&#xff1f;3)翻译程序、汇编程序、编译程序、解释程序有什么差别&#xff1f;各自的特性是什么&#xff1f;4)不同级别的语言编写的程序有什么区别&#…
阅读更多...
华为OD技术面试案例3-2024年

华为OD技术面试案例3-2024年

技术一面&#xff1a; 1.手撕代码&#xff0c;算法题&#xff1a; 【最小路径和】 手撕代码通过&#xff0c;面试官拍了照片 2.深挖项目&#xff0c;做过的自认为最好的一个项目&#xff0c;描述做过的项目的工作过程&#xff0c;使用到哪些技术&#xff1f; 技术二面&…
阅读更多...
单细胞Seurat - 细胞聚类(3)

单细胞Seurat - 细胞聚类(3)

本系列持续更新Seurat单细胞分析教程&#xff0c;欢迎关注&#xff01; 维度确定 为了克服 scRNA-seq 数据的任何单个特征中广泛的技术噪音&#xff0c;Seurat 根据 PCA 分数对细胞进行聚类&#xff0c;每个 PC 本质上代表一个“元特征”&#xff0c;它结合了相关特征集的信息。…
阅读更多...
枚举（蓝桥练习）

枚举（蓝桥练习）

目录 一、枚举算法介绍 二、解空间的类型 三、循环枚举解空间 四、例题 &#xff08;一、反倍数&#xff09; &#xff08;二、特别数的和&#xff09; &#xff08;三、找到最多的数&#xff09; &#xff08;四、小蓝的漆房&#xff09; &#xff08;五、小蓝和小桥的…
阅读更多...
【JGit 】一个完整的使用案例

【JGit 】一个完整的使用案例

需求 生成一系列结构相同的项目代码&#xff0c;将这些项目的代码推送至一个指定的 Git 仓库&#xff0c;每个项目独占一个分支。 推送时若仓库不存在&#xff0c;则自动创建仓库。 分析 生成代码使用 Java 程序模拟&#xff0c;每个项目中模拟三个文件。Project.cpp 、Pro…
阅读更多...
CUMT---图像处理与视觉感知---期末复习重点

CUMT---图像处理与视觉感知---期末复习重点

文章目录 一、概述 本篇文章会随课程的进行持续更新中&#xff01; 一、概述 1. 图像的概念及分类。  图像是用各种观测系统以不同形式和手段观测客观世界而获得的、可以直接或间接作用于人的视觉系统而产生的视知觉实体。  图像分为模拟图像和数字图像&#xff1a;(1) 模拟图…
阅读更多...
Leetcode 第 385 场周赛题解

Leetcode 第 385 场周赛题解

Leetcode 第 385 场周赛题解 Leetcode 第 385 场周赛题解题目1&#xff1a;3042. 统计前后缀下标对 I思路代码复杂度分析 题目2&#xff1a;3043. 最长公共前缀的长度思路代码复杂度分析 题目3&#xff1a;3044. 出现频率最高的质数思路代码复杂度分析 题目4&#xff1a;3045. …
阅读更多...
【新书推荐】8.4 逻辑运算指令

【新书推荐】8.4 逻辑运算指令

本节内容&#xff1a;逻辑运算指令。8086 CPU逻辑运算指令包括NOT、AND、OR、XOR&#xff0c;除NOT指令外&#xff0c;均有两个操作数。逻辑运算指令影响状态标志位。 ■否操作指令NOT指令格式&#xff1a;NOT OPRD。将OPRD取反&#xff0c;然后送回OPRD。操作数可以是8位/16位…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站