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. (分类讨论 拓扑排序)参加会议的最多员工数 文章目录 【力扣】2127. (分类讨论 拓扑排序)参加会议的最多员工数1. 题目介绍2. 思路(**分类讨论 拓扑排序**)3. 解题代码4. Danger参考 1. 题…...
Flutter——最详细(Map)使用教程
Map简介 键值对的集合,您可以使用其关联的键从中检索值。 普通的 HashMap是无序的(不保证顺序),LinkedHashMap 按键插入顺序迭代,而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1,添加元素 addEntri…...
vue的入门第一课
Vue.js是一款流行的JavaScript框架,用于构建交互式Web应用程序。本文将详细介绍Vue.js的基础知识,包括Vue.js的历史、设计模式、构造函数参数、el、data、computed、method、watch以及差值的使用。 Vue.js是什么? Vue.js是一款用于构建用户…...
已解决:conda找不到对应版本的cudnn如何解决?
1.解决方法 配置深度学习环境时,打算安装cudatoolkit11.2和cudnn8.1,当使用conda install cudnn8.0时,却搜索不到这个版本的包,解决方法如下: conda search cudnn -c conda-forge然后就可以使用如下命令进行安装对应…...
大语言模型的学习路线和开源模型的学习材料《二》
第三层 LLMs to Artifact 第一重 langchain 【LLMs 入门实战 —— 十二 】基于 本地知识库 的高效 🤖langchain-ChatGLM 介绍:langchain-ChatGLM是一个基于本地知识的问答机器人,使用者可以自由配置本地知识,用户问题的答案也是基于本地知识生成的。【LLMs 入门实战 ——…...
Flask-SQLAlchemy事件钩子介绍
一、前言 前几天在搜资料的时候无意中看到有介绍SQLAlchemy触发器,当时感觉挺奇怪的,触发器不是数据库层面的概念吗,怎么flask-SQLAlchemy这个ORM框架会有这玩意。 二、SQLAlchemy触发器一个简单例子 考虑到效率博客表中有两个字段…...
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 允许我们创建“实时”应用程序,与传统 API 协议相比,该应用程序速度更快且开销更少。 一、WebSocket 是如何工作的 按照传统的定义,WebSocket是一种双工协议,主要用于客户端-服务器通信通道。它本质上是双向的&…...
redis是什么
redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API。和Memcached类似。redis支持存储的value类型相对更多,包括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 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 基于深度学习的人脸专注度…...
跨境电商的新引擎:崛起的网红经济
随着全球数字化时代的崛起,跨境电商成为了国际贸易的新引擎,而在这个巨大的变革浪潮中,网红经济正在崭露头角,成为这一引擎的有力推动者。在这篇文章中,我们将深入探讨网红经济如何催生跨境电商的新动力,以…...
P2006 赵神牛的游戏 python解法
赵神牛的游戏 题目描述 在 DNF 中,赵神牛有一个缔造者,他一共有 k k k 点法力值,一共有 m m m 个技能,每个技能耗费的法力值为 a i a_i ai,可以造成的伤害为 b i b_i bi,而 boss 的体力值为 n n…...
Unity的碰撞检测(六)
温馨提示:本文基于前一篇“Unity的碰撞检测(五)”继续探讨两个游戏对象具备刚体的BodyType均为Dynamic,但是Collision Detection属性不同的碰撞检测,阅读本文则默认已阅读前文。 (一)测试说明 在基于两个游戏对象都具…...
从前序与中序遍历序列构造二叉树
代码如下,开袋即食 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上传图片,默认使用上传方式会调用本地的接口。 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.后端部分 一、项目介绍 本项目实现了一个通过网页访问的简单计算器,它可以对带括号的加减乘除表达式进行计算并将计算结果返回给用户,并且可以对用户输入的表达式进行合法性判断&#…...
java实现多文件打包压缩,导出zip文件
一.实现多文件打包压缩 Testpublic void testZipFile() throws IOException {String filePath "D:\\导出压缩文件.zip";OutputStream outputStream new FileOutputStream(filePath);try (ZipOutputStream zipOutputStream new ZipOutputStream(outputStream)) {//…...
尤斯伯恩书籍购买指南:多语言版本可选,不同地区购买方式大揭秘!
按年龄浏览书籍 如果禁用了 cookies,商店将无法正常工作。您的浏览器似乎禁用了 JavaScript。为了在我们的网站上获得最佳体验,请确保在浏览器中启用 JavaScript。跳转到内容,英语 - 英镑 £,选择语言:英语、法语、…...
Windows驱动管理神器:Driver Store Explorer完整使用教程与系统优化指南
Windows驱动管理神器:Driver Store Explorer完整使用教程与系统优化指南 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你是否曾经因为Windows系统驱动问题而烦恼ÿ…...
神经模拟器超越训练数据:从误差纠正到高效科学计算
1. 项目概述:当神经模拟器“青出于蓝”在科学计算这个行当里,求解偏微分方程(PDE)是模拟从流体流动到热量传递、从电磁场到量子力学等几乎所有物理现象的基础。我们这些搞计算的人,常年跟有限差分、有限体积、有限元这…...
SSNet:基于Shamir秘密共享的高效安全神经网络推理框架
1. 项目概述:当神经网络推理遇上秘密共享在当今这个数据驱动决策的时代,机器学习即服务(MLaaS)正变得无处不在。无论是医疗影像分析、金融风险评估还是个性化内容推荐,用户都希望将数据提交给强大的云端模型并获得精准…...
融合UFF与机器学习势:高通量筛选MOF吸附剂的高效精准方案
1. 项目概述:当经典力场遇上机器学习势,如何实现MOF吸附剂的精准高效筛选?在材料研发的前沿,尤其是像金属-有机框架(MOFs)这样拥有近乎无限结构可能性的领域,我们常常面临一个“大海捞针”的困境…...
Maven POM(项目对象模型)
Maven POM(项目对象模型) 引言 Maven 是一个强大的构建自动化工具,用于简化项目构建、依赖管理和项目信息维护。在 Maven 中,每个项目都有一个名为 pom.xml 的配置文件,该文件被称为项目对象模型(Project Object Model,简称 POM)。本文将详细介绍 Maven POM 的结构和…...
AI多模态技术:从语音识别到AI结构化笔记是怎么实现的
最近发现一个挺有意思的事。越来越多的人开始用视频转笔记类的工具,把B站视频或者播客丢进去,几分钟就能拿到一份带小标题、有时间戳的图文讲义。我挺好奇这背后到底是怎么做到的。拆了一下技术链路,发现比想象中复杂不少。第一环:…...
基于机器视觉与机器学习的化学分析自动化:从颜色反应到浓度预测
1. 项目概述:当化学分析遇上人工智能 在实验室里,我们常常依赖一些经典的“颜色反应”来判断物质的浓度。比如,用碘化钾溶液检测水中的总氧化剂——溶液从无色逐渐变成黄色、棕色,颜色越深,氧化剂浓度越高。这个方法叫…...
2026脑机接口与大模型融合架构解析
引言当一位渐冻症患者在脑海中浮现 “我想喝床头那杯温水” 的念头,传统脑机接口(BCI)或许只能识别出 “喝水” 这一模糊的宏观意图,却无法捕捉 “温水”“床头杯” 这些细节;当健康用户试图通过意念控制智能家居&…...
UE5小地图实战:SceneCapture2D+RenderTarget动态雷达优化指南
1. 这不是“加个UI贴图”就能糊弄过去的小地图在UE5项目里做小地图,很多人第一反应是:找张静态地图图片,用UMG拖个Image控件,再写个蓝图把玩家坐标换算成UI像素位置——做完就交差。我去年带一个独立团队做开放世界生存游戏时&…...
