2020-03-13 嘉麒项目中日历组件设计

难点

1. 分离日历的固有逻辑与业务逻辑，业务中有许多互斥条件
2. 日历面板中的日期组件，需要用插槽传入，因为会和业务逻辑挂钩

通用方法

月份变更

月份变更时，要注意的是，目标月份天数小于当前月份

monthHandler(payload){
  let monthVal= this.current[1]+ payload;
  let dayVal= this.current[2]
  // new Date(2019, 10, 0).getDate()
  let max= new Date(this.current[0], monthVal- 1, 0).getDate();
  max= (dayVal> max? max: dayVal);
  let newDate= new Date(this.current[0], monthVal, max);
  this.init(newDate);
},

得到一个月中最大天数

// month0表示month值是从0开始的
currentMax(){
  return new Date(year, month0+ 1, 0).getDate();
}

得到一个月的第一天从星期几开始

let begin= new Date(year, month, 1).getDay();
// 如果这个月第一天恰好是周天，则要让出第一行，否则可能会出现末尾两行都是空的情况，不美观
begin= (begin=== 0? 7: begin);