Vue实现日历小插件


Posted in Javascript onJune 26, 2019

本文实例为大家分享了Vue实现日历小插件的具体代码,供大家参考,具体内容如下

先看下效果图吧, 如下

源码可见于我的github

Vue实现日历小插件

实现关键点:

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

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

<template>
 <div class="wrap">
//months是一个包含十二个月名字的数组,用v-for对其进行循环渲染,并且把月份的index传给子组件
  <div v-for='(items, index) in months' v-if="index == monthIndex">
  <month :monthName='items' 
        :year='year' //年份传给子组件,年份在mounted里面计算得出
        :monthIndex='index' //月份传给子组件
        :day='today'//当日日期传给子组件
        :key='index' >
    </month>
  </div>
 </div>
</template>
 
//data部分
 data () {
   return {
   monthIndex: 0,
   months:['January', 'February', 'March', 'April', 
          'May', 'June', 'July', 'August', 
          'September', 'October', 'November', 'December'],
   year:-1,
   day:-1,
   }
  },

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

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

//父组件 
mounted () {
  let myDate = new Date();
  this.monthIndex = myDate.getMonth();
  this.year = myDate.getFullYear(); 
  this.today = myDate.getDate() - 1;
  },

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

//index值为0-41
<div v-for="(item, index) in days" :key='index' 
class="dayIndex" @click='choose(index)' 
:class="{choose: day == index}"> //动态绑定样式

当data中的属性day的值和index的值相等的时候,就会给div添加一个choose的样式,但是这样有一个问题——那就是每个月的该index的div都会有这个class样式。

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

if (new Date().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 Date(year + '/' + monthIndex + '/' + '01').getDay();

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

monthLastDay:{
 0:31,
 1:28,
 2:31,
 3:30,
 4:31,
 5:30,
 6:31,
 7:31,
 8:30,
 9:31,
 10:30,
 11:31
},
getMonthLastDay (year, month){
 if (month != 1) {
 return this.monthLastDay[month];
 } else {
    //this.leapyear是布尔值 它表示该年是否为闰年
 if (this.leapyear) {
  return 29;
 } else {
  return 28;
 }
 }
},

得到上个月最后一天的日期以及本月1号为周几之后我们就可以知道需要填入的上个月日期有哪些了,可以往days数组(本月日历渲染数据存储数组)里push了。

问题3:这个问题就简单很多了,因为本月日历一共有42天,我们在一个i<42的for循环里面对数组days进行push,在push完上月日期和本月日期之后,把日期重置为1,继续push到for循环结束就好了

//index为上个月最后一天的日期 lastDayNum为上个月剩余天数
generateDays (index, lastDayNum) {
 let temp = 1;
 //这个for循环是push上个月的剩余日期,
 for (let i = lastDayNum; i > 0; i--) {
  this.days.push([(index - i + 1).toString()]);
 }
    //index置1,开始push本月天数
 index = 1;
 for (let i = 0; i < 42 - lastDayNum; i++) {
  //闰年二月
  if (this.leapyear) {
  if (index <= 29) {
   this.days.push(index.toString());
  }
  //非闰年月份
  } else if (index <= this.monthLastDay[this.monthIndex]) {
   this.days.push(index.toString());
   //这个else是push下个月的日期
  } else {
   this.days.push([temp.toString()]);
   temp++;
  }
  index++;
  }
 },

问题4:在上面代码中可以看到,在push非本月日期的时候,push进day数组的不是字符串而是一个数组[xxx.toString],这样就可以区分本月和非本月日期,然后在v-if里面对值进行判断添加class即可

<div v-for="(item, index) in days" :key='index' 
class="dayIndex" @click='choose(index)' 
:class="{choose: chooseIndex == index}">
  //item为string 为本月日期
 <div v-if="typeof(item) == 'string'">
 {{item}}
 </div>
  //否则为非本月日期 添加class setGrey
 <div v-else class="setGrey">
 {{item[0]}}
 </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的style.display属性操作
Mar 27 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
javascript数据类型示例分享
Jan 19 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
拖动时防止选中
Feb 03 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 #Javascript
Vue组件实现触底判断
Jun 26 #Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 #Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 #Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 #Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
You might like
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php中session退出登陆问题
2014/02/27 PHP
php中JSON的使用与转换
2015/01/14 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
javascript兼容性(实例讲解)
2017/08/15 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python3并发写文件与Python对比
2019/11/20 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Solaris操作系统的线程机制
2015/07/28 面试题
党员入党表决心的话
2014/03/11 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
科学发展观活动总结
2014/08/28 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
行政答辩状范文
2015/05/21 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
zabbix配置nginx监控的实现
2022/05/25 Servers