antd 组件 RangePicker 设置mode=['month', 'month'] disableDate属性失效

前言：vue中使用ant-design-vue的rangPicker组件时，mode设置为date时，disabledDate属性正常，可通过返回true或者false设置当前时间是否禁止点击。当mode设置为month或者year时，disableDate属性失效，为实现大于当前日期的月不能点击，或者小于起始日期的月不能点击可通过获取当前dom的内容，进行判断设置month-disabled类名进而实现mode为非date时的禁用效果。具体代码如下：

1、template

 <a-range-picker
          :disabled-date="disabledDate"
          :value="month"
          style="width:240px"
          :mode="rangeType === 'month' ? ['month', 'month'] : ['date', 'date']"
          :format="(current === 1 || current === 2) && rangeType === 'month' ? 'YYYYMM' : 'YYYY-MM-DD'"
          @panelChange="handlePanelChangeMonth"
          @openChange="openChange"
          @change="calendarChange"
          :placeholder="['开始日期', '结束日期']"
        />

2、data设置

data(){
  return {
    rangeType:'month',
    month: [],
  }
}

3、methods中

    disabledDate(current) {
      // Can not select days before today and today
      let flag = current && current > moment().endOf('day') ? true : false
      // console.log(444, current, flag)
      return flag
    },
   //月份修改
    handlePanelChangeMonth(value) {
      let currentDate = value.concat([])
      // console.log('handlePanelChangeMonth=', value)
      // 当前选择第一个日期小于上次选择的第一个日期
      let rangeType = this.rangeType
      let rangeValue = []
      let isBeforeOne = moment(value[0]).isBefore(this.month[0])
      let diff = moment(value[0]).diff(this.month[0], rangeType)
      // console.log(isBeforeOne, diff)
      if (isBeforeOne) {
        // rangeValue第一个值 = 原值-差值
        rangeValue[0] = this.sliderValue[0] - diff
      } else {
        rangeValue[0] = this.sliderValue[0] + diff
      }
      let isBeforeTwo = moment(value[1]).isBefore(this.month[1])
      let diff2 = moment(value[1]).diff(this.month[1], rangeType)
      if (isBeforeTwo) {
        // rangeValue第一个值 = 原值-差值
        rangeValue[1] = this.sliderValue[0] - diff2
      } else {
        rangeValue[1] = this.sliderValue[0] + diff2
      }

      // console.log('diff==', diff, diff2, rangeValue)
      this.afterChange = false
      this.month = [currentDate[0], currentDate[1]]
      this.sliderValue = rangeValue
      if (this.current === 2) {
        this.getCwList()
      }
    },
    openChange() {
      setTimeout(() => {
        if (this.rangeType === 'month') {
          this.endDisabled()
          this.startDisabled()
          this.calendarChange()
        }
      })
      /*
                 新增--
                 解决面板翻页禁用失效问题
                  */
      // 打开日期面板添加翻页事件
      // this.yearPanelPageChange()
    },
    // 年份禁用结束时间
    endDisabled() {
      this.$nextTick(() => {
        const year = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1].innerText
        let currentYear = moment(new Date()).year() //当
        const table = document.getElementsByClassName('ant-calendar-month-panel-tbody')

        // 所有结束年份
        const endList = table[1].querySelectorAll('td')
        endList.forEach((item, ind) => {
          if (year < currentYear) {
            item.classList.remove('month-disabled')
            return
          }
          let currentMonth = moment(new Date()).month() //当前月-1
          // console.log('item.innerText==', item, item.innerText)
          // console.log(ind, currentMonth, ind - currentMonth > 0)
          if (item.innerText < this.month[0] || ind - currentMonth > 0) {
            item.setAttribute('class', 'month-disabled')
          } else {
            item.classList.remove('month-disabled')
          }
        })
      })
    }, // 年份开始日期禁用
    startDisabled() {
      this.$nextTick(() => {
        const table = document.getElementsByClassName('ant-calendar-month-panel-tbody')
        // 所有开始年份
        const startList = table[0].querySelectorAll('td')
        startList.forEach(item => {
          if (item.innerText > this.month[1]) {
            item.setAttribute('class', 'month-disabled')
          } else {
            item.classList.remove('month-disabled')
          }
        })
      })
    },
    // 待选日期发生变化的回调
    calendarChange() {
      if (this.rangeType === 'month') {
        const yearDom = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1]
        // console.log('change', yearDom)
        // DOMCharacterDataModified： 监听dom内容变化 
        yearDom.addEventListener('DOMCharacterDataModified', () => {
          // console.log('year change')
          this.endDisabled()
        })
      }
    },

4、style设置

// 禁止点击当前月
.month-disabled {
  pointer-events: none;
  cursor: not-allowed;
  a {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
  }
}