学习笔记Vue（十四）—— 用vue写一个日历组件

先看一下实现的效果：

实现日历的逻辑：

先写出日历的大致结构，分两个部分，头部和主体部分，日历先显示6排7列，总共42个数字，按从1到42来显示：

<div class="every-day" v-for="item in 42" :key="item"></div>

像这样：

然后获取当前日期是星期几，用日历中的数字减去这个数字，就使得1号在正确的位置上显示了。
获取当前日期是星期几的方法：

new Date(this.year, this.month - 1, 1).getDay(); //获取当前日期是星期几

然后再判断经过计算的日期，如果小于等于0，则应显示上个月被排版到这个月的日期，如果大于0且大于当前月份的总天数的话，则是下个月被排版到这个月的日期，也就是日历上的灰体字。
上个月日期显示：当前item 减去这个月1号的星期数，再加上上个月的总天数

<div class="other-day" v-else-if="item - beginDay <= 0">
{{item - beginDay + prevDays}}
</div>

下个月日期显示：当前item 减去这个月1号的星期数，再减去当前月的总天数

<div class="other-day" v-else>{{item - beginDay - curDays}}</div>

写不动了，直接上带注释的代码吧…

全部代码！

<template><div class="calender"><div class="dateHeader"><div class="prev-month" @click="handlePrev"></div><div class="show-date">{{year}}年{{month}}月{{day}}日</div><div class="next-month" @click="handleNext"></div></div><div class="dateContent"><div class="week-header"><div v-for="item in ['日','一','二','三','四','五','六']" :key="item">{{item}}</div></div><div class="week-day"><div class="every-day" v-for="item in 42" :key="item">{{item}}<div v-if="item - beginDay > 0 && item - beginDay <= curDays":class="{'now-day': `${year}-${month}-${item-beginDay}` === curDate,'active-day':  `${year}-${month}-${item-beginDay}` === `${year}-${month}-${day}`}":data-day="item - beginDay"  @click="handleChooseDay">{{item - beginDay}}</div><div class="other-day" v-else-if="item - beginDay <= 0">{{item - beginDay + prevDays}}</div><div class="other-day" v-else>{{item - beginDay - curDays}}</div></div></div></div></div>
</template><script>export default {data () {return {year: null,month: null,day: null,curDate: ''}},created(){this.getInitTime();// console.log(new Date(this.year, this.month - 1, 1).getDay());},methods: {getInitTime () {//初始化，获取当前年月日const date = new Date();this.year = date.getFullYear();this.month = date.getMonth() + 1;this.day = date.getDate();this.curDate = `${this.year}-${this.month}-${this.day}`;},handleChooseDay(e){//获取点击选中的日期   :data-dayconsole.log(e.target.dataset); // DOMStringMap {day: "11"}this.day = e.target.dataset.day;},handlePrev(){//点击上个月，如果是1月，则上个月是12月，年份减1if(this.month == 1){this.month = 12;this.year -- ;}else{this.month --;}this.computedDay();},handleNext(){//点击下个月  如果是12月，下个月则变成1月，年份加一if(this.month == 12){this.month = 1;this.year ++;}else{this.month ++;}this.computedDay();},computedDay(){//如果选中的是一个月里的最后一天，比如31，下一个月只有30天，反到下一个月要自动选中30const allDay = new Date(this.year, this.month, 0).getDate();if(this.day > allDay){this.day = allDay;}}},computed: {beginDay() {//这个月的1号是星期几return new Date(this.year, this.month - 1, 1).getDay();},curDays() {//直接拿到这个月的天数return new Date(this.year, this.month, 0).getDate();},prevDays(){//上个月的天数return new Date(this.year, this.month-1, 0).getDate();}}}
</script><style>.calender{width: 560px;/* height: 500px; */}.dateHeader {margin-bottom: 10px;}.dateHeader div{display: inline-block;}.prev-month{width: 0; height: 0;border-width: 15px;border-style: solid;border-color:transparent #f44444 transparent transparent;}.show-date{width: 87%;text-align: center;height: 30px;line-height: 30px;vertical-align: top;}.next-month{width: 0; height: 0;border-width: 15px;border-style: solid;border-color:transparent transparent transparent #f44444;}.week-header{background: #f44444;}.week-header div{display: inline-block;width: 70px;height: 35px;line-height: 35px;text-align: center;color: #fff;margin-left: 5px;margin-right: 5px;}.week-day div{width:70px;height: 45px;line-height: 45px;margin: 5px;text-align: center;display: inline-block;cursor: pointer;}.other-day {color: #999;}.now-day{color: #fff;background: #f44444;}.active-day{border: 2px solid #f44444;}
</style>

（完）

学习笔记Vue（十四）—— 用vue写一个日历组件相关推荐

Android笔记(二十四)：gradle写一个android12自动适配exported脚本，支持aab
背景由于Google play的政策,提审aab的时候需要适配android12,适配android12最大的工作就是在AndroidManifesst.xml文件中声明的四大组件,都要显式声明ex ...
Spring Security技术栈学习笔记（十四）使用Spring Social集成QQ登录验证方式
上一篇文章<Spring Security技术栈开发企业级认证与授权(十三)Spring Social集成第三方登录验证开发流程介绍>主要是介绍了OAuth2协议的基本内容以及Spring ...
Cty的Linux学习笔记（十四）
Linux学习笔记--第十四篇环境变量配置文件: /etc/profile:预设了几个重要的变量,例如PATH,USER,LOGNAME,MAIL,INPUTRC,HOSTNAME,HISTSIZE ...
Windows保护模式学习笔记（十四）—— 阶段测试
Windows保护模式学习笔记(十四)-- 阶段测试题目一解题步骤题目二解题步骤题目一描述:给定一个线性地址,和长度,读取内容 int ReadMemory(OUT BYTE* buffe ...
OpenCV学习笔记（十四）：重映射：remap( )
OpenCV学习笔记(十四):重映射:remap( ) 图像的坐标映射是通过原图像与目标图像之间建立一种映射关系,这种映射关系有两种,一种是计算原图像任意像素在映射后图像的坐标位置,另一种是计算变换后 ...
QT学习笔记（十四）：QLayout的属性介绍
QT学习笔记(十四):QLayout的属性介绍主要包括QBoxLayout.和QGridLayout以及QFormLayout等的参数类似. 我主要说明一下QGridLayout在QtDesigne ...
MATLAB学习笔记（十四）
MATLAB学习笔记(十四) 一.线性方程组求解 1.1 直接法 1.1.1 利用左除运算符 1.1.2 利用矩阵分解 1.2 迭代法 1.2.1 雅可比(Jacobi)迭代法 1.2.2 高斯-赛德 ...
python数据挖掘学习笔记】十四.Scipy调用curve_fit实现曲线拟合
#2018-03-28 10:02:08 March Wednesday the 13 week, the 087 day SZ SSMR python数据挖掘学习笔记]十四.Scipy调用curve ...
深度学习笔记（十四）—— 超参数优化[Hyperparameter Optimization]
这是深度学习笔记第十四篇,完整的笔记目录可以点击这里查看. 训练神经网络会涉及到许多超参数设置.神经网络中最常见的超参数包括: the initial learning rate lea ...
Slicer学习笔记（十四）vtkMRMLVolumeNode 与 vtkImageData
Slicer学习笔记(十四)vtkMRMLVolumeNode 与 vtkImageData 1.Adding in MRML to Slicer 2.MRML Scene 3.MRML Nodes ...

学习笔记Vue（十四）—— 用vue写一个日历组件

全部代码！

学习笔记Vue（十四）—— 用vue写一个日历组件相关推荐

最新文章

热门文章

学习笔记Vue（十 四）—— 用vue写一个日历组件

全部代码！

学习笔记Vue（十 四）—— 用vue写一个日历组件相关推荐

最新文章

热门文章

学习笔记Vue（十四）—— 用vue写一个日历组件

学习笔记Vue（十四）—— 用vue写一个日历组件相关推荐