使用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,一经查实,立即删除!

相关文章

【iOS ARKit】协作Session

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

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

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

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…

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

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

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;栅格数据的投影变…

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 //是否全部按键只响应单击事件

自动化测试高效学习路线指导,提高你百倍自学效率

前言 从各方来的朋友&#xff0c;能够相聚这篇文章是大家的缘分&#xff0c;也是我的荣幸。 接下来&#xff0c;我要开始和大家讲讲如何从0开始学Python自动化测试。 不论是转行自动化测试还是功能测试进阶自动化还是开发转自动化测试的伙伴&#xff0c;这篇自动化测试工程师…

Zookeeper客户端命令、JAVA API、监听原理、写数据原理以及案例

1. Zookeeper节点信息 指定服务端&#xff0c;启动客户端命令&#xff1a; bin/zkCli.sh -server 服务端主机名:端口号 1&#xff09;ls / 查看根节点下面的子节点 ls -s / 查看根节点下面的子节点以及根节点详细信息 其中&#xff0c;cZxid是创建节点的事务id&#xff0c…

Rocky Linux 运维工具 firewall-cmd

一、firewall-cmd​的简介 ​​firewall-cmd​是基于firewalld的防火墙管理工具。用户可以使用它来配置、监控和管理防火墙规则&#xff0c;包括开放端口、设置服务规则等。 二、firewall-cmd​​的参数说明 序号参数描述1​​–zone指定防火墙区域2–add-portxxx/tcp允许特定…

tkinterFrame框架+标签框架LabelFrame+Toplevel窗口的使用

1.在tkinter中&#xff0c;Frame是一个容器小部件用于组织和管理其他小部件。它可以作为一个独立的可见区域&#xff0c;也可以作为其他小部件的父容器。 import tkinter as tk import tkinter.ttk as ttk import tkinter.messagebox as mbm tk.Tk() m.title("tkinter L…

MSSQL渗透测试

目录 mssql数据库连接提权至服务器权限 拿到目标的IP地址&#xff0c;我们先对IP地址进行信息收集&#xff0c;收集信息资产&#xff0c;同时使用nmap对IP地址进行扫描 nmap -sC -sV IP从扫描的结果中&#xff0c;我们能知道目标服务器是windows操作系统&#xff0c;使用的是m…

DAY10-内容安全过滤技术概述

文件过滤技术流程: 应用行为控制技术具体:

W-TinyLFU 算法实现

前言 不同于常见的 LRU 或 LFU&#xff0c;Window TinyLFU 是一种非常高效的缓存设计方案。先来看下 LRU 和 LFU 算法的缺点&#xff1a; LFU 缺点&#xff1a; 需要为每个记录项维护频率信息&#xff0c;这将消耗大量的内存空间可能存在旧数据长期不被淘汰&#xff08;一开…

让AI给你写代码,初体验(二)-写一个flask应用

这里我们准备让AI做一个稍微复杂一点任务&#xff0c;写一个前后应用&#xff0c;具体&#xff1a; 前台用html输入股票代码&#xff0c;后台通过akshare的接口程序获取该股票的实时价格&#xff0c;然后返回显示在html 我们先用AI对话看一下&#xff0c;AI会给我们什么编码建…

柯桥会计培训学校,会计职称考试,考中级会计怎么证明工作年限?

中级会计考试是会计从业人员的重要考试之一&#xff0c;对于中级考生来说&#xff0c;工作年限证明是必不可少的一步。因此&#xff0c;在考中级会计之前&#xff0c;需要对如何证明工作年限进行了解和掌握。 为大家整理了工作年限证明相关信息&#xff0c;一起来看看吧~ 一、…