开发那点事（四）vue实现一个日历插件

开发背景
产品给开发这个流程图

找了两天插件,最后产品还是不满意，自己着手开始实现了，
最终效果

整体思路
1 确定日期json数组
2 根据数组渲染到页面上
3 根据不同的status应用不同的css
4 根据不同的状态做出判断
开发细节
1 json数组的格式如下

 {year: 2019,//年month: '02',//月dayArray: [{day: '01', //表示月份中的天status: 0 //  0 正常状态 1最右边 2 最左边  3 开始时间 4 结束时间  5正常选中}]}

要用到了一个函数根据年月获取月份中的天数

//根据年月获取天数
function getDate(year, month){let d = new Date(year, month, 0);return d.getDate();
}

2 数组渲染至页面

 <div :id="index" v-for="(item,index) in calendarDate"><div class="calendar-top row-around"><div> {{item.month}}</div><div>{{item.year}}</div></div><div class="calendar-midden"><div v-for="preItem in 5" class="day-item column-center">&nbsp;</div><div @click="selectTime(index,dayIndex)" v-for="(dayItem,dayIndex) in item.dayArray"class="day-item column-center"><!--          status =0正常状态--><div v-show="dayItem.status ==0" style="width: 100%;height: 100%" class="column-center">{{dayItem.day}}</div><!--          status =1 最右边--><div v-show="dayItem.status ==1"style="width: 100%;height: 100%;background: #91835C;border-bottom-right-radius: 14px;border-top-right-radius:14px"class="column-center">{{dayItem.day}}</div><!--          status =2 最左边--><div v-show="dayItem.status ==2"style="width: 100%;height: 100%;background: #91835C;border-bottom-left-radius: 14px;border-top-left-radius:14px"class="column-center">{{dayItem.day}}</div><!--          status =3 开始--><div v-show="dayItem.status ==3"style="float:left;width: 100%;height: 100%;background: #91835C;border-bottom-left-radius: 14px;border-top-left-radius:14px"class="column"><divstyle="width: 28px;height:28px;background: #F5C509;border-radius: 14px"class="column-center">{{dayItem.day}}</div></div><!--          status =4 结束--><div v-show="dayItem.status ==4"style="float: right;width: 100%;height: 100%;background: #91835C;border-bottom-right-radius: 14px;border-top-right-radius:14px"class="column-end"><div style="margin-left: calc(100% - 28px);width: 28px;height:28px;background: #F5C509;border-radius: 14px"class="column-center">{{dayItem.day}}</div></div><!--          status =5 正常选中--><div v-show="dayItem.status ==5"style="width: 100%;height: 100%;background: #91835C;"class="column-center">{{dayItem.day}}</div></div></div><div class="calendar-bottom"></div></div>

在页面渲染中status字段判断比较多，用来区分不同的状态
3 selectTime判断选择时间

向其中传入数组的两个index参数，来确定具体的位置，再根据状态，做出相应的判断,具体代码如下

selectTime(index, dayIndex) {switch (this.calendarStatus) {// 0 默认状态， 1 选择了开始时间   2 选择了结束时间case 0:let startTime = this.calendarDate[index].year + '-' + (this.calendarDate[index].month) + '-' + (this.calendarDate[index].dayArray[dayIndex].day < 10 ? "0" + this.calendarDate[index].dayArray[dayIndex].day : this.calendarDate[index].dayArray[dayIndex].day);if (startTime < this.startDate) {this.showToast('选择时间超出范围');break;}this.selectStartTime = startTime;this.calendarStatus = 1;this.calendarDate[index].dayArray[dayIndex].status = 3;this.curIndex = index;this.curDayIndex = dayIndex;break;case 1:let endTime = this.calendarDate[index].year + '-' + (this.calendarDate[index].month) + '-' + (this.calendarDate[index].dayArray[dayIndex].day < 10 ? "0" + this.calendarDate[index].dayArray[dayIndex].day : this.calendarDate[index].dayArray[dayIndex].day);if (endTime < this.selectStartTime) {this.showToast('结束时间不能小于开始时间', 'red', 'error');return;}this.setSelectItem(index, dayIndex);this.calendarDate[index].dayArray[dayIndex].status = 4;this.calendarStatus = 2;this.selectEndTime = endTime;break;case 2:this.resetDate();this.calendarStatus = 1;this.calendarDate[index].dayArray[dayIndex].status = 3;this.selectStartTime = this.calendarDate[index].year + '-' + (this.calendarDate[index].month) + '-' + (this.calendarDate[index].dayArray[dayIndex].day < 10 ? "0" + this.calendarDate[index].dayArray[dayIndex].day : this.calendarDate[index].dayArray[dayIndex].day);this.curIndex = index;this.curDayIndex = dayIndex;}},

4 获取时间
通过一个button来输出选择的开始时间跟结束时间，其实在选中结束的时候，就已经设置在变量中了，获取的时候只需要做出相应的判断

  //提交时间submitTime() {let that = this;switch (this.calendarStatus) {case 0:that.showToast('请选择开始时间');break;case 1:that.showToast('请选择结束时间');break;case 2:console.log('开始时间：' + that.selectStartTime + ' 结束时间：' + that.selectEndTime);that.showToast('开始结束时间已输出，console');break;}}

5 总结
个人觉得vue最大的特点是数据双向绑定，而对于开发而言则着重于数组与页面之间的关系，通过操作数组来控制页面上数据的改变。
6 下载地址
https://download.csdn.net/download/zw21544182/11159368

开发那点事（四）vue实现一个日历插件相关推荐

用vue 编写一个日历组件（非常详细-让日历简单起来）
相信有不少小伙伴和我一样一提到日历就脑壳疼,然后去网上搜索好用的日历组件,如element-ui什么的,但是日历毕竟是别人开发出来的, 和自己家ui设计出来的功能样式毕竟不能100%相似,所以这个时候 ...
前端 vue 制作一个日历（一）
由于项目需求,需要做一个日历先上一个图吧此方法获取的天数是一个总的天数全部代码 <template><div id="wfcalendar">< ...
flex插件_uniapp撸一个日历插件
最近在使用uni-app进行小程序开发,涉及到日历的开发,由于是多语言版本,需要找到能够自定义周一到周末各个名称的日历插件,逛了一圈插件市场没有找到满意的,只好自己动手,丰衣足食话不多说,直接开干, ...
学习笔记Vue（十四）—— 用vue写一个日历组件
先看一下实现的效果: 实现日历的逻辑: 先写出日历的大致结构,分两个部分,头部和主体部分,日历先显示6排7列,总共42个数字,按从1到42来显示: <div class="every- ...
利用html写一个日历,Vue写一个日历
基础回顾关于 Date API getFulleYear(); // 年 getMonth(); // 月, 0-11 getDate(); // 日,也就是几号 getDay(); // 星期几, ...
vue实现一个日历切换功能
1.显示星期几和对应日历 2.可以增减年份/月份 3.可以选中当前时间效果图 <template><div class="date-pickers">&l ...
从 0 到 1 用 Vue 封装一个日历组件
写在前面双手奉上代码链接: 传送门 - ajun568(https://github.com/ajun568/vue-calendar),点击文末阅读原文直达双脚奉上最终效果图: 需求分析需求分 ...
vue封装一个日历组件
图示封装的组件的代码如下 <template><div class="calendar"><div c ...
vue实现农历日历插件——vue-jlunar-datepicker插件的使用——技能提升
最近在写后台管理系统,需要实现一个功能就是农历日历组件,需要实现选择日历/回显日历等功能效果图如下: vue-jlunar-datepicker这个插件本身是基于vue2.0和elementUi框 ...

开发那点事（四）vue实现一个日历插件

开发那点事（四）vue实现一个日历插件相关推荐

最新文章

热门文章