Vue + Element：实现前端日历统计功能

---

前言

在项目开发过程中，需要新增一个日历，来显示每日任务数据及完成情况的功能需求。由于之前没有开发过类似需求，通过查阅element官网以及网上资料。最终完成该功能需求。

---

一、显示效果

二、需求实现

1. 当天之前的时间，显示框置灰，禁止点击

实现代码如下：

              <div slot="reference" class="div-Calendar" :class="(show(data.day))?{disabled:true}:{disabled:false}" @click="calendarOnClick(data)">
                <p align="center" :class="data.isSelected ? 'is-selected' : ''" style="height: 10px;">
                  {{ data.day.split('-').slice(2).join('-') }}
                </p>
                <div v-for="item in calendarData" :key="item.dateStr">
                  <div v-if="item.dateStr === data.day">
                    <div class="is-selected" align="center">任务数: {{ dataCheckout(item.taskTotal) }} 个</div>
                    <div class="is-selected" align="center">完成情况: {{ dataCheckout(item.cenaNum) }} / {{ dataCheckout(item.taskTotal) }}</div>
                  </div>
                </div>
              </div>

  methods: {
    show(day) {
      if (day < moment(new Date()).format('YYYY-MM-DD')) {
        return true
      } else {
        return false
      }
    }
    }

通过 show方法，来判断 div的 样式

2. 隐藏 上月日期和下月日期 并 时间框高度调节

上月日期和下月日期 （隐藏）：

<style scoped>
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 100px;
}
.el-calendar-table:not(.is-range) td.prev, .el-calendar-table:not(.is-range) td.next {
    visibility: hidden;
}

上月日期和下月日期 （显示，禁止点击）：

.el-calendar-table:not(.is-range) td.prev, .el-calendar-table:not(.is-range) td.next {
    pointer-events: none
}

3. 移入时间框显示 提示框 并 延时弹出

实现代码如下：

            <el-popover
              slot="reference"
              placement="top-start"
              title="任务"
              width="220"
              trigger="hover"
              :open-delay="openDelay"
              @show="getTaskInfo(data)"
            >
            
  		   <!-- 业务代码块  -->
  		
            </el-popover>

  data: function() {
    return {
      openDelay: 1000
      }
  }

4. 上月，今天，下月 按钮实现

实现代码如下：

  created: function() {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      )
      prevBtn.addEventListener('click', e => {
        this.row.date = this.value
        getCalendarDate(this.row).then(response => {
          this.calendarData = response.data
          this.list = response.data
        }).catch(_ => {
          this.emptyText = '接口异常，请稍后访问'
        })
      })

      // 点击下一个月
      let nextBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(3)'
      )
      nextBtn.addEventListener('click', () => {
        this.row.date = this.value
        getCalendarDate(this.row).then(response => {
          this.calendarData = response.data
          this.list = response.data
        }).catch(_ => {
          this.emptyText = '接口异常，请稍后访问'
        })
      })

      // 点击今天
      let todayBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)'
      )
      todayBtn.addEventListener('click', () => {
        this.row.date = this.value
        getCalendarDate(this.row).then(response => {
          this.calendarData = response.data
          this.list = response.data
        }).catch(_ => {
          this.emptyText = '接口异常，请稍后访问'
        })
      })
    })
  },

完整代码：
完整日历实现代码

总结

以上就是在开发过程中做的全部，希望大家多多学习，交流！