开发那点事（四）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 数组渲染至页面

 

      

        
 {{item.month}}
        
{{item.year}}
      
      

        
 
        

          
          
{{dayItem.day}}
          
          

            {{dayItem.day}}
          
          
          

            {{dayItem.day}}
          
          
          

            

              {{dayItem.day}}
            
          
          
          

            

              {{dayItem.day}}
            
          
          
          

            {{dayItem.day}}
          
        
      
      

    

在页面渲染中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最大的特点是数据双向绑定，而对于开发而言则着重于数组与页面之间的关系，通过操作数组来控制页面上数据的改变。