vue - 小日历项目制作中的问题与解决思路

Posted padding1015

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue - 小日历项目制作中的问题与解决思路相关的知识,希望对你有一定的参考价值。

效果图:

技术图片

 

项目难点:
1. 每个月的日期数是不定的,拢共需要几个格子?
按照教程的做法需要42个。所以遍历数字42,得到42个div做格子。
技术图片

 



2. 格子的排版怎么做?
顶部的星期布局使用的flex水平方向两边对齐并单项flex为1占满空间。
下边格子用了grid布局(具体见源码css)

技术图片

 



3. 本月一号是星期几怎么计算?
可以利用Date对象提供的公式计算:
new Date(目标年份,目标月份 - 1,1).getDay();

4. 本月最大天数是几怎么计算?
可以利用口诀计算:...
也可以利用Date对象提供的公式计算:
new Date(目标年份,目标月份,0).getDate();

5. 本月一号从哪里开始渲染?
因为所有格子是从1-42遍历的。
技术图片

 


我们又得到了本月一号是星期几,所以我们做一个判断,当前格子的编号dayId是从1-42的。

判断dayId大于beginDay(每月1号是星期几,0表示星期日,是第一个格子,6表示星期6是第7个格子。)就说明是本月开始日了,

用公式if(dayId > beginDay)那么渲染编号就不是dayId,而是dayId - beginDay。7-6就是1,8-6就是2,依次类推就有了1-31的日子。
技术图片

 


这里判断当前格子编号大于开始日、并且当前格子 - 开始日后,遍历的数字不能超过本月最大数字。满足这俩条件的就是本月日历数据。

技术图片

 



6. 本月一号之前的几天怎么处理?(上个月那几天灰色的怎么计算、展示出来?)
有两种计算方法,但是道理都是一个,当前格子的dayId是从1->beginDay的。而beginDay就是6以内的一个正数。

规律就是beginDay - dayId,依次就是7、6、5、4、3、2、1,dayId - beginDay就是-6、-5、-4、-3、-2、-1、0这样。

而我们又知道beginDay的前一天,也就是1号的前一天、上个月的最后一天的数字(比如31),31-正数 || 31 + 负数就都能求出来。
技术图片


7. 从本月一号渲染到最大天数后、后边怎么计算?(下个月那几天灰色的怎么计算、展示出来?)
原理同上了,也是要判断当前编号,如果当前编号dayId成了32,那就是大于本月最大天数(比如说31)了,那就从1开始计算。

难点是这个1编号乃至接下来的顺序编号怎么出。那就是当前dayId - 最大天数31 - 开始天数beginDay。

你想想,beginDay是6,占了前6个格子,最大天数是31,又占了31个格子。这加起来就是37格。

当dayId编号是38的时候,38-37=1,下一个dayId是39,于是39-37=2,以此类推,就有了下个月的几天。
技术图片

 




以上三天,通过if判断展示出了对应的三种span情况。
8. 上个月&&下个月置灰的效果怎么做?
我们计算知道第一个span和第三个span都分别是上月和下月的日子,加上灰度类名即可。



9. 切换左右按钮月份怎么处理?切换到今天跳转到当前日期
技术图片

 


其实三个按钮的原理一样,都是切换按钮,跳转指定的年月(日是当前选中的,10-11问)。
就是要重置以下这几个参数:
技术图片

 


而这几个参数初始化的时候处理过一遍,所以这里封装一下:
技术图片

 


目的是渲染左上角这个日期。
技术图片

 


并初始化数据this.nowYear等。
初始化的时候调用一下init、回到今天功能也是调用一下init,传入当前日期即可。
技术图片

 



上一个月和下一个月,分别传入this.nowMonth --/++ 的数据,当然要做month的极值判断
技术图片

 



10. 点击每一天切换类名并添加边框样式,此时调用函数传参应该是啥?
我的初步理解,应该还是当前dayId。然后我们渲染的时候,判断dayId和当前点击变量重合就加一个类名表示选中样式。

:class="[(dayId - beginDay == nowDay && ‘today‘),(dayId == dayIndex && ‘active‘)]"

today的判断逻辑是:判断当前实际渲染的日子(格子id"dayId" - 开始盒子编号“beginDay”) === 今天日期

技术图片

 




active选中的判断逻辑是:判断当前格子编号"dayId" === 点击div时重置的daiIndex的编号。

这里这么做有两个问题:
1、today判断的只有日期,第几号,没有判断那一年那一月,我换个上个月的本日,today依旧生效
2、点击上个月或下个月的灰色区域,会重新渲染表格,到时候保存的dayId和重新渲染后的dayId格子内的数字一定不一致,
因此修改如下:
首先today必须是"2019/06/06"这个字段完全一致才能视做今天。
因此利用new Date().toLocaleDateString()得到一个完整的日期字符串2019/5/28。然后每个div上也渲染上data-str属性,通过计算得到当前格子所代表的时间"年/月/日"相同的串,
:data-str="getStr(三个span的哪一个,当前月份, 当前格子的日期)"
因为三类span分别代表上月、本月、下月。所以也有可能会跨年,所以传入第一个参数用于做判断第二个参数的极值是12还是1。
getStr内部逻辑如下:
技术图片

 



最后判断第一个问题:只有两个串完全相等才是today。
技术图片

 



这样一来第二个问题:切换,也就好改了,拿着e.data.target.dataset时间串去init(传参即可)
技术图片

 



span @click="changeActive"
点击的时候,去执行修改日期即可
技术图片

 



11. 点击下(上)个月那几天灰色的切换到下(上)个月怎么处理?
同上一条差不多

12. 当前选中本月31号,切换到上月没有31号怎么展示?
再次修改当前active的逻辑,修改变量名为dayActive。
类名绑定逻辑为:
技术图片

 


初始话的时候,dayActive==当前日期
技术图片

 


切换日期的时候,正则匹配到data-str绑定到span格子上的data属性值的日期:
技术图片

 




切换月份按钮的时候,检查切换前选中的是哪一天,然后判断要切换的月份没有这一天,(主要是31号的判断,其他1-28号都会有)就选中为最大天。
this.maxDayNum是计算属性很讨巧。
技术图片

 

源码地址:github

 

 

 

以上是关于vue - 小日历项目制作中的问题与解决思路的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js横向日历组件

前端Vue3+Vant4项目:旅游App-项目总结与预览(已开源)

Vue.js与WdatePicker日历控件冲突问题的解决方案

前端Vue项目:旅游App-(12)home-Calendar:日期选择日历动态显示时间

前端Vue项目:旅游App-(12)home-Calendar:日期选择日历动态显示时间

# pc端个性化日历实现