开发那点事（四）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"> </div> <div
@click="selectTime(index,dayIndex)" v-for="(dayItem,dayIndex) in item.dayArray"
class="day-item column-center">  <div
v-show="dayItem.status ==0" style="width: 100%;height: 100%"
class="column-center">{{dayItem.day}}</div>  <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>  <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>  <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"> <div style="width:
28px;height:28px;background: #F5C509;border-radius: 14px"
class="column-center"> {{dayItem.day}} </div> </div>  <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>  <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最大的特点是数据双向绑定，而对于开发而言则着重于数组与页面之间的关系，通过操作数组来控制页面上数据的改变。

热门工具换一换