Element UI DatePicker 监听年月切换并获取变更

需求：在每切换一次年月时根据当前展示的日期调用接口获取数据，判断当月的每一天是否有活动，将有活动的日期进行特殊标记。

如下图，有活动的日期需加红色标记。最简单的方式是直接查询所有的数据，进行匹配展示就行。但是考虑到数据量可能有点大，因此最好只查询当前月的数据就好。因此需要监听年月切换并获取变更。

查看DatePicker 日期选择器相关api没有月份切换的相关事件，只有选择值切换了才会触发change事件；

解决方案：

查看源码发现组件的月份切换后，DatePicker的子组件picker的date值会发生变化，因此只需要使用$watch监听picker的date值在发生变化的时候进行相关查询就行。

1.通过ref绑定组件

2.在页面挂载时绑定监听事件，需要先监听DatePicker组件的pickerVisible值为true时才能监听其内部子组件picker，否则子组件可能未初始化。然后在通过$watch监听picker的date值就能获取到月份切换后的日期值了。

...
mounted() {
    let unwatch = null;
    // 监听活动日历 月份发生变化后需要刷新日历中活动的标志
    this.$nextTick(() => {
      const datePicker = this.$refs.datePicker; // 获取组件
      // pickerVisible为true时picker才展示出来
      datePicker.$watch('pickerVisible', (newValue) => {
          if (newValue) {
              // 打开了日期选择面板，获取picker组件
              const picker = activityDatePicker.picker;
              if (picker) {
                  unwatch = picker.$watch('date', (newDate) => {
                          console.log('newDate', newDate);
                          // 切换月份后的日期 后续使用该日期进行相关数据查询
                          this.$nextTick(this.getActivityListByDate(newDate))
                      })
                  }
              }else {
                  if (unwatch) { // 移除监听效果 防止重复监听 多次触发回调
                      unwatch();
                  }
              }
          });
    })
},
...

注意：当选择日期后需要移除picker的监听事件，否则可能会导致每次打开面板都会注册监听事件，导致多次触发回调。

当前返回的只是当前完整月的日期，但是这个日历面板可能存在前一个月末尾几天和后一个月的前几天，因此为了展示完整数据，可以在这个date值上进行处理，我这边简单处理直接moment.js处理date获取的日期的前一个月的第一天以及后一个月的最后一天确定范围进行数据查询（前后共计三个月）

// 根据单个日期查询该日期前后一个月的时间范围内的活动列表
getActivityListByDate(date) {
    let beginTime = '';
    let stopTime = '';
    if (date) {
        beginTime = parseInt(this.$moment(date).subtract(1, 'months').startOf('month').unix()); // 前一个月第一天
        stopTime = parseInt(this.$moment(date).add(1, 'months').endOf('month').unix()); // 后一个月最后一天
    }
    ...后续相关查询
}