使用Vue实现日历小插件的示例

　　介绍

小编给大家分享一下使用Vue实现日历小插件的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

先看下效果图吧,如下

使用Vue实现日历小插件的示例

<强>实现关键点:

1。组件的复用以及父子组件传值

很明显每年每个月的月历样式(数据不一样)是一致的,那么自然而然思路就是把每个月作为一个公用组件进行复用十二次,这样就避免了多次重复的代码。每个组件不一样的地方在于年份和月份,而这两个数据我们可以由父组件向子组件进行传值来告诉子组件。关键代码如下:

& lt; template> 　　,& lt; div 类=皐rap"比;//个月是一个包含十二个月名字的数组,用v代表对其进行循环渲染,并且把月份的指数传给子组件 　　& lt;才能div  v=& # 39;(项目,,指数),月# 39;拷贝,v=癷ndex ==, monthIndex"比; 　　& lt; month :才能monthName=& # 39;项目# 39;, 　　,,,,,,,:年=& # 39;年# 39;,//年份传给子组件,年份在安装里面计算得出 　　,,,,,,,:monthIndex=& # 39;指数# 39;,//月份传给子组件 　　,,,,,,,:一天=& # 39;整理# 39;//当日日期传给子组件 　　,,,,,,,:关键=& # 39;指数# 39;,在 　　,,,& lt;/month> 　　& lt;才能/div> 　　,& lt;/div> 　　& lt;/template> 　　,//数据部分 　　,data  (), { 　　,,return  { 　　,,,monthIndex: 0, 　　,,个月:[& # 39;1 # 39;,,& # 39;2 # 39;,,& # 39;3 # 39;,,& # 39;4 # 39;,, 　　,,,,,,,,,& # 39;5 # 39;,,& # 39;6 # 39;,,& # 39;7 # 39;,,& # 39;8月# 39;,, 　　,,,,,,,,,& # 39;9 # 39;,,& # 39;10月# 39;,,& # 39;11月# 39;,,& # 39;12月# 39;], 　　,,:1, 　　,,一天:1、 　　,,} 　　,,},

2。实现默认当日选中并且切换月份的时候其他月份不会有选中样式

在父组件的安装钩子里面我们会计算当年当月当日,并传给子组件,子组件的有个天属性用于存储父组件传来的今天的值,天属性默认值为1,父组件传值过去之后会给天属性重新赋值

//父组件, 　　mounted  (), { 　　let 才能;myDate =, new 日期(); 　　时间=this.monthIndex 才能;myDate.getMonth (); 　　this.year 才能=,myDate.getFullYear (),, 　　this.today 才能=,myDate.getDate(),安康;1; 　　,,},

在子组件循环渲染每天的日期的时候会设置一个动态绑定样式类似于一下代码(实际代码略微不一样):

//索引值为0-41 　　& lt; div  v=?项目,,指数),拷贝days",:关键=& # 39;指数# 39;, 　　类=癲ayIndex", @click=& # 39;选择(指数)& # 39;, 　　:类=皗选择:day ==,指数}“祝辞,//动态绑定样式

当数据中的属性天的值和指数的值相等的时候,就会给div添加一个选择的样式,但是这样有一个问题,那就是每个月的该指数的div都会有这个类样式。

解决办法:在安装里面做个判断,如果为当月,则给数据里面的天赋值,否则不做改动仍为1,1在循环渲染日期的时候没有对应的指数,所以不会产生选中样式。

if  (new 日期().getMonth (),==, this.monthIndex), {=,,this.chooseIndex  this.day  +, this.firstDayIndex; 　　}

3。如何计算本月月历中上个月多余的天数和下个月需要加进来的天数以及日期?,

这是该日历里面比较复杂和关键的一点,我们可以看到每个月的日历总共需要42天,除开本月天数,肯定还会包括上个月部分日期和下个月部分日期,所以该问题涉及以下多个因素:

,,,1)。本月1号前应该留给上个月多少天数

,,,2)。上个月最后的日期是不一样的,有28 29 30 31

,,,3)。本月的天数和留给下个月的天数

,,,4)。非本月的日期需要置灰

这四个问题可以分别用下面的思路来解决:

<强>问题1:强计算本月的1号是周几,如果是周一那么前面应当留1天给上个月(日历从周日开始计算),如果是周二就应当留2天

每月1号可以用以下函数求得

new 日期(year  +, & # 39;/& # 39;, +, monthIndex  +, & # 39;/& # 39;, +, & # 39; 01 & # 39;) .getDay ();

<强>问题2:可以在数据里面建立一个哈希表——monthLastDay (js对象),对应出每个月的天数,那么上个月的最后一天的日期就可以用monthLastDay [monthIndex - 1]求得,其中如果上个月是二月份要单独判断是否为闰年

monthLastDay: { 　　0:31, 　　一28, 　　2:31, 　　,3, 　　31, 　　,5, 　　,航班, 　　7:31, 　　8:30, 　　,31, 　　10:30, 　　,11:31 　　},

使用Vue实现日历小插件的示例