当前位置: 首页 > news >正文

vue 自己捣鼓周日程日历组件

需求:想要一个周日程表,记录每天的计划,点击可查看详情。可自定义时间段通过后台获取时间段显示

分析:

通过需求,超级课程表app这款软件其中课表和这个需求很像,只不过这个需求第一列的时间段是自定义的,不是上午下午两个,但是原理都差不多
原本想找一些第三方插件使用,由于时间充足,而且自己也想封装成一个组件方便以后或许会碰到类似的需求,于是自己手动写了一个日程日历。
效果如下

 优化修改:数据量大时,格子显示太长问题,这里进行了优化,如果超过2个就进行展开与收缩操作

例子

<template><div id="app"><WSchedule :planList="timePeriodList" :isFirstDayOfMondayOrSunday="7" :hasNumExpend="2" @handleDetail="handleDetail" @handleCardDetail="handleCardDetail" @changeWeek="changeWeek"><template v-slot:thing="{row}"><span>时段:{{ row.timePeriod }}</span><span>课程:{{ row.course }}</span><span>值班员:{{ row.watchman }}</span><span>地点:{{ row.place }}</span></template></WSchedule></div>
</template><script>import WSchedule from '@/components/WeekSchedule'export default {name: 'App',components: {WSchedule,},data() {/*** 获取当天时间* @returns {string}*/function getCurDay(num = 0) {var datetime = new Date();var year = datetime.getFullYear();var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;let day = datetime.getDate()if ((day + num) > 0) {day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;} else {day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;}return `${year}-${month}-${day}`}return {timePeriodList: [{timePeriod: '8:00~10:00',schedule: [{isExpend: false,[getCurDay()]: [{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 2,},{timePeriod: '8:00~10:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 3,},],},{isExpend: false,[getCurDay(-1)]: [{id: 1,timePeriod: '8:00~10:00',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},]}]},{timePeriod: '12:00~14:00',schedule: [{isExpend: false,[getCurDay()]: [{timePeriod: '12:00~14:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 2,},{timePeriod: '12:00~14:00',date: getCurDay(),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 3,},],},{isExpend: false,[getCurDay(-1)]: [{timePeriod: '12:00~14:00',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '实验室1',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},{timePeriod: '实验室1',date: getCurDay(-1),course: '大学英语',watchman: '井底的蜗牛',place: '测试地点',status: 1,},]}]},{timePeriod: '14:00~16:00',schedule: []},],}},methods: {/*** 点击详情* @param row*/handleDetail(row){console.log(row)},/

相关文章:

vue 自己捣鼓周日程日历组件

需求:想要一个周日程表,记录每天的计划,点击可查看详情。可自定义时间段通过后台获取时间段显示 分析: 通过需求,超级课程表app这款软件其中课表和这个需求很像,只不过这个需求第一列的时间段是自定义的,不是上午下午两个,但是原理都差不多 原本想找一些第三方插件使…...

【力扣】2127. (分类讨论 + 拓扑排序)参加会议的最多员工数

【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数 文章目录 【力扣】2127. &#xff08;分类讨论 拓扑排序&#xff09;参加会议的最多员工数1. 题目介绍2. 思路&#xff08;**分类讨论 拓扑排序**&#xff09;3. 解题代码4. Danger参考 1. 题…...

Flutter——最详细(Map)使用教程

Map简介 键值对的集合&#xff0c;您可以使用其关联的键从中检索值。 普通的 HashMap是无序的&#xff08;不保证顺序&#xff09;&#xff0c;LinkedHashMap 按键插入顺序迭代&#xff0c;而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1&#xff0c;添加元素 addEntri…...

vue的入门第一课

Vue.js是一款流行的JavaScript框架&#xff0c;用于构建交互式Web应用程序。本文将详细介绍Vue.js的基础知识&#xff0c;包括Vue.js的历史、设计模式、构造函数参数、el、data、computed、method、watch以及差值的使用。 Vue.js是什么&#xff1f; Vue.js是一款用于构建用户…...

已解决:conda找不到对应版本的cudnn如何解决?

1.解决方法 配置深度学习环境时&#xff0c;打算安装cudatoolkit11.2和cudnn8.1&#xff0c;当使用conda install cudnn8.0时&#xff0c;却搜索不到这个版本的包&#xff0c;解决方法如下&#xff1a; conda search cudnn -c conda-forge然后就可以使用如下命令进行安装对应…...

大语言模型的学习路线和开源模型的学习材料《二》

第三层 LLMs to Artifact 第一重 langchain 【LLMs 入门实战 —— 十二 】基于 本地知识库 的高效 🤖langchain-ChatGLM 介绍:langchain-ChatGLM是一个基于本地知识的问答机器人,使用者可以自由配置本地知识,用户问题的答案也是基于本地知识生成的。【LLMs 入门实战 ——…...

Flask-SQLAlchemy事件钩子介绍

一、前言 前几天在搜资料的时候无意中看到有介绍SQLAlchemy触发器&#xff0c;当时感觉挺奇怪的&#xff0c;触发器不是数据库层面的概念吗&#xff0c;怎么flask-SQLAlchemy这个ORM框架会有这玩意。 二、SQLAlchemy触发器一个简单例子 考虑到效率博客表中有两个字段&#xf…...

C++——list

目录 list介绍 list的函数接口 构造函数 push_front和pop_front push_back和pop_back insert erase 迭代器 front和back size resize empty clear list::sort unique reverse 迭代器的实现 list介绍 list是一种可以在常数范围内在任意位置进行插入和删除的序列…...

【Linux】第九站:make和makefile

文章目录 一、 Linux项目自动化构建工具make/Makefile1.make/makefile工作现象2.依赖关系与依赖方法3.如何清理4.为什么这里我们需要带上clean5.连续的make6.特殊符号 二、Linux下实现一个简单的进度条1.回车换行2.缓冲区3.倒计时的实现 一、 Linux项目自动化构建工具make/Make…...

一文了解什么是WebSocket

WebSocket 允许我们创建“实时”应用程序&#xff0c;与传统 API 协议相比&#xff0c;该应用程序速度更快且开销更少。​ 一、WebSocket 是如何工作的 按照传统的定义&#xff0c;WebSocket是一种双工协议&#xff0c;主要用于客户端-服务器通信通道。它本质上是双向的&…...

redis是什么

redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。和Memcached类似。redis支持存储的value类型相对更多&#xff0c;包括string(字符串)、list(链表)、set(集合)和zset(有序集合)。 一、 基本…...

基于深度学习的人脸专注度检测计算系统 - opencv python cnn 计算机竞赛

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…...

跨境电商的新引擎:崛起的网红经济

随着全球数字化时代的崛起&#xff0c;跨境电商成为了国际贸易的新引擎&#xff0c;而在这个巨大的变革浪潮中&#xff0c;网红经济正在崭露头角&#xff0c;成为这一引擎的有力推动者。在这篇文章中&#xff0c;我们将深入探讨网红经济如何催生跨境电商的新动力&#xff0c;以…...

P2006 赵神牛的游戏 python解法

赵神牛的游戏 题目描述 在 DNF 中&#xff0c;赵神牛有一个缔造者&#xff0c;他一共有 k k k 点法力值&#xff0c;一共有 m m m 个技能&#xff0c;每个技能耗费的法力值为 a i a_i ai​&#xff0c;可以造成的伤害为 b i b_i bi​&#xff0c;而 boss 的体力值为 n n…...

Unity的碰撞检测(六)

温馨提示&#xff1a;本文基于前一篇“Unity的碰撞检测(五)”继续探讨两个游戏对象具备刚体的BodyType均为Dynamic&#xff0c;但是Collision Detection属性不同的碰撞检测&#xff0c;阅读本文则默认已阅读前文。 &#xff08;一&#xff09;测试说明 在基于两个游戏对象都具…...

从前序与中序遍历序列构造二叉树

代码如下&#xff0c;开袋即食 class Solution {private Map<Integer,Integer> map;public TreeNode buildTree(int[] preorder, int[] inorder) {map new HashMap<>();for(int i 0;i<preorder.length;i){map.put(inorder[i],i);}return build(preorder,inord…...

antd5上传图片显示405解决

antd5上传图片&#xff0c;默认使用上传方式会调用本地的接口。 405 Method Not Allowed 状态码 405 Method Not Allowed 表明服务器禁止了使用当前 HTTP 方法的请求。 Upload {...props}beforeUpload{(file) > {//自定义上传图片的逻辑//最后返回falsereturn false }} &…...

生成瑞利信道(Python and Matlab)

channel h k h_k hk​ is modeled as independent Rayleigh fading with average power loss set as 10^−3 Python import numpy as np# Set the parameters average_power_loss 1e-3 # Average power loss (10^(-3)) num_samples 1000 # Number of fading samples to …...

数据结构Demo——简单计算器

简单计算器 一、项目介绍二、技术使用三、具体代码实现1.前端部分2.后端部分 一、项目介绍 本项目实现了一个通过网页访问的简单计算器&#xff0c;它可以对带括号的加减乘除表达式进行计算并将计算结果返回给用户&#xff0c;并且可以对用户输入的表达式进行合法性判断&#…...

java实现多文件打包压缩,导出zip文件

一.实现多文件打包压缩 Testpublic void testZipFile() throws IOException {String filePath "D:\\导出压缩文件.zip";OutputStream outputStream new FileOutputStream(filePath);try (ZipOutputStream zipOutputStream new ZipOutputStream(outputStream)) {//…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...