开发那点事（四）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">
            <div
              style="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最大的特点是数据双向绑定，而对于开发而言则着重于数组与页面之间的关系，通过操作数组来控制页面上数据的改变。