使用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"><divid="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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

连不上网的解决办法集--持续更新

连不上网的解决办法集–持续更新 1、有网卡&#xff0c;但网卡驱动失效 背景&#xff1a;有网络驱动但是依旧连不上网&#xff0c;只有inteV6有值&#xff0c;inte 没有值&#xff08;正常应该有个ipv4的信息&#xff09; 判断原因&#xff1a;可能是之前格式化磁盘驱动的时…

【iOS ARKit】协作Session

使用 ARWorldMap&#xff0c;能解决使用者再次进入同一物理空间时的AR 场景恢复问题&#xff0c;也能在多人之间共桌AR 体验&#xff0c;但这种共享并不是实时的&#xff0c;在载入ARWorldMap 后&#xff0c;设备新检测到的环境信息和使用者所做操作不会实时共享&#xff0c;即…

【MATLAB】 小波分解信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 小波分解算法 小波分解算法是一种数学方法&#xff0c;用于将信号分解为不同频率的小波成分。这种算法基于小波函数&#xff0c;可以用于信号处理、图像压缩和数据压缩等领域。小波分解算法的基本思想是…

nginx的nginx.conf的基本配置方法

#定义Nginx运行的用户和用户组 user www www; #nginx进程数&#xff0c;建议设置为等于CPU总核心数。 worker_processes 8; #全局错误日志定义类型&#xff0c;[ debug | info | notice | warn | error | crit ] error_log /var/log/nginx/error.log info; #进程文件 pi…

LeetCode59. 螺旋矩阵 II(C++)

LeetCode59. 螺旋矩阵 II 题目链接代码 题目链接 https://leetcode.cn/problems/spiral-matrix-ii/ 代码 class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> res(n, vector<int>(n, 0));int startx …

数据结构:栈和队列与栈实现队列(C语言版)

目录 前言 1.栈 1.1 栈的概念及结构 1.2 栈的底层数据结构选择 1.2 数据结构设计代码&#xff08;栈的实现&#xff09; 1.3 接口函数实现代码 &#xff08;1&#xff09;初始化栈 &#xff08;2&#xff09;销毁栈 &#xff08;3&#xff09;压栈 &#xff08;4&…

代码随想录算法训练营第27天—贪心算法01 | ● 理论基础 ● 455.分发饼干 ● 376. 摆动序列 ● 53. 最大子序和

理论基础 https://programmercarl.com/%E8%B4%AA%E5%BF%83%E7%AE%97%E6%B3%95%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html 贪心算法的本质&#xff1a;由局部最优推到全局最优贪心算法的套路&#xff1a;无固定套路 455.分发饼干 https://programmercarl.com/0455.%E5%88%8…

前端面试题(一)

1、说一下vue生命周期 什么是生命周期 Vue 实例从创建到销毁的过程就是生命周期。从开始创建&#xff0c;初始化数据&#xff0c;编译模板&#xff0c;挂载 Dom 到渲染&#xff0c;更新到渲染&#xff0c;销毁等一系列过程&#xff0c;称之为生命周期。 Vue生命周期共有8个阶…

【毕业设计推荐】基于MATLAB的水果分级系统设计与实现

一、课题介绍 现在商业行为中&#xff0c;在水果出厂前都需要进行质量检测&#xff0c;需要将不同等级的水果进行分级包装&#xff0c;以保证商业利益最大化。可是传统方法都是依靠人工进行检测&#xff0c;效率低下&#xff0c;主观成分大&#xff0c;并不能很好客观地评价出货…

流畅的Python(十四)-可迭代对象、迭代器和生成器

一、核心要义 1. 使用iter内置函数处理可迭代对象的方式 2. 如何使用Python实现经典的迭代器模式 3. 生成器函数工作原理 4. 使用生成器函数或生成器表达式代替经典的迭代器 5. 使用yield from语句合并生成器 二、代码示例 1、遍历单词序列回顾 #!/usr/bin/env python …

电脑WiFi共享给电脑的网口,另一终端可通过该网口进行上网。可用于wireshark抓设备终端的包。

1、点击WinR&#xff0c;弹出命令框&#xff0c;输入services.msc 2、选中“Internet Connection Sharing”这个服务右键&#xff0c;点击属性打开&#xff0c;启动类型选择“自动”&#xff0c;确定保存 3、点击WinR&#xff0c;弹出命令框&#xff0c;输入regedit 4、找到路径…

Qt中的QGraphicView和QGraphicScene简单使用

概述&#xff1a;我们利用QGraphicView和QGraphicScene来实现一个简单的视频播放器&#xff0c;然后上面悬浮一些操作的控件&#xff0c;看看怎么来实现。 1、CcTestVideoPlayer类 模拟播放器类&#xff0c;继承QGraphicScene 1.1 CcTestVideoPlayer.h #pragma once#include…

【ArcGIS】重采样栅格像元匹配问题:不同空间分辨率栅格数据统一

重采样栅格像元匹配问题&#xff1a;不同空间分辨率栅格数据统一 原始数据数据1&#xff1a;GDP分布数据2.1&#xff1a;人口密度数据2.2&#xff1a;人口总数数据3&#xff1a;土地利用类型 数据处理操作1&#xff1a;将人口密度数据投影至GDP数据&#xff08;栅格数据的投影变…

LVS做集群四层负载均衡的简单理解

背景&#xff1a;业务中主要是TCP/SSL连接&#xff0c;要做四层负载均衡。 之前做负载均衡&#xff0c;调研了nginx&#xff08;见之前的nginx实现后端服务负载均衡和nginx负载均衡监测后台服务状态&#xff09;。 nginx作为一个应用&#xff0c;做四层负载均衡效率低。lvs是li…

非同质化权益(NFR):重塑数字资产权益的生态系统

每天五分钟讲解一个互联网知识&#xff0c;大家好我是啊浩 随着区块链技术的深入发展和普及&#xff0c;数字资产已经逐渐渗透到我们生活的方方面面。在这一背景下&#xff0c;非同质化权益&#xff08;NFR&#xff09;作为一种新型的数字资产形式&#xff0c;不仅为数字资产权…

eBPF实践篇之环境搭建

文章目录 前言实验环境前置知识配置开发环境最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;本次我们学习一下eBPF&#xff0c;我们基于libbpf-bootstrap来进行我们的eBPF程序开发&#x1f917; 实验环境 一台Debian12操作系统的计算机&#xff0c;我使用的是Debian12.…

什么是索引?它们在MySQL中是如何工作的?什么是视图(View)?它们有什么用?

什么是索引&#xff1f;它们在MySQL中是如何工作的&#xff1f; 索引在MySQL中是一个数据结构&#xff0c;它帮助快速查询数据库中的数据。没有索引&#xff0c;查询可能需要遍历整个数据库表&#xff0c;这称为全表扫描&#xff0c;对于大型表来说非常慢。 索引的工作原理是创…

SpringBoot案例(黑马学习笔记)

这个案例呢&#xff0c;就是Tlias智能学习辅助系统。 参考接口文档完成后端功能的开 发&#xff0c;然后结合前端工程进行联调测试即可。 完成后的成品效果展示&#xff1a; 准备工作 需求&环境搭建 需求说明 部门管理 部门管理功能开发包括&#xff1a; ● 查询部门列…

亚信安慧AntDB数据库与流式处理的有机融合

流式处理的概念 2001年9月11日&#xff0c;美国世贸大楼被袭击&#xff0c;美国国防部第一次将“主动预警”纳入国防的宏观战略规划。而IBM作为当时全球最大的IT公司&#xff0c;承担了大量基础支撑软件研发的任务。其中2009年正式发布的IBM InfoSphere Streams&#xff0c;就是…

杰理-按键多次按下识别多击

杰理-按键多次按下识别多击 #define ALL_KEY_EVENT_CLICK_ONLY 0 //是否全部按键只响应单击事件