封装一个简单的小日历组件，可以在日历上点击任务并展示

当时接到的需求就是有一个日历组件，上面可以展示当前这个月的任务列表，点击任务展示具体详情
如果任务超过两个，会自动隐藏并展示 …

<template>
  <div>
    <el-calendar ref="calender" v-model="nowDay">
      <template slot="dateCell" slot-scope="{date,data}">
        <div :style="isIncludes(data,scheduleData[data.day]) ? { backgroundColor : generateRandomColors(Number(data.day.split('-').slice(2).join('-'))) } : {}" class="dataContent"
             @click="handleCalendarClick">
          <p style="text-align: center">{{ data.day.split('-').slice(1).join('-') }}</p>
          <div v-for="(item,index) in scheduleData[data.day]" :key="item.id">
            <p v-if="index <= 1 && (item.workingDay.indexOf(data.day.split('-').slice(2).join('-')) !== -1)" class="mission-items"
               @click.prevent="gotoMissionDetail(item)">
              {{ item.content }}
              <!--如果有任务状态-->
              <span v-if="item.isStatus">:{{ item.statusName }}</span>
            </p>
            <!--超过两个时候如何展示-->
            <i @click.stop="showAllMission(scheduleData[data.day])" v-if="index > 1 && (item.workingDay.indexOf(data.day.split('-').slice(2).join('-')) !== -1)" class="el-icon-caret-bottom calender-caret" ></i>
          </div>
        </div>
      </template>
    </el-calendar>
    <p style="color:#F0973D;">含有<i  class="el-icon-caret-bottom calender-caret"></i>: 当日任务超过两个，可以点击查看箭头查看所有任务</p>
    <el-dialog
      title="任务"
      :visible.sync="centerDialogVisible"
      width="30%"
      >
      <span>这里展示所有的任务列表？</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "calender-mission",
  props: {
    nowDay: {
      type: String || Number,
      default: new Date()
    },
    scheduleData: {
      type: Object,
      default: () => {}
    }
  },
  data(){
    return {
      centerDialogVisible:false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      const t = this.$refs.calender.$el && this.$refs.calender.$el.getElementsByClassName('el-calendar-table')[0].children[0].children
      for (let i = 0; i < t.length; i++) {
        t[i].innerHTML = '周' + t[i].innerHTML
      }
    })
  },
  methods: {
    showAllMission(allDayMission){
      console.log(allDayMission)
      this.centerDialogVisible = true
    },
    isIncludes(data, arr = []) {
      const nowDay = data.day.split('-').slice(2).join('-')
      const arrDay = arr.map(i => i.workingDay)
      return arrDay.indexOf(nowDay) !== -1
    },
    gotoMissionDetail(item) {
      console.log(item, 'item')
    },
    handleCalendarClick() {
      // 阻止事件冒泡和默认行为
      event.stopPropagation();
      event.preventDefault();
    },
    generateRandomColors(num) {
      let colors = []; // 存放生成的颜色数组
      for (let i = 0; i < num; i++) {
        let red = Math.floor(Math.random() * 256);
        let green = Math.floor(Math.random() * 256);
        let blue = Math.floor(Math.random() * 256);
        let color = red + ", " + green + ", " + blue;
        if (!colors.includes(color)) {
          colors.push(color);
        } else {
          i--;
        }
      }

      return `rgba(${colors[0].split(',')[0]},${colors[0].split(',')[1]},${colors[0].split(',')[2]},.5)`;
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-table:has(.is-range) td.prev,
::v-deep .el-calendar-table:has(.is-range) td.next {
  cursor: not-allowed;
  pointer-events: none;
  // display: none;
}

::v-deep .el-calendar-table:not(.is-range) td.prev,
::v-deep .el-calendar-table:not(.is-range) td.next {
  cursor: not-allowed;
  pointer-events: none;
  // display: none;
}

.prev > .el-calendar-day > .dateContent {
  display: none;
}

.next > .el-calendar-day > .dateContent {
  display: none;
}

// 隐藏月份后多一行
::v-deep .el-calendar-table:not(.is-range) td.next { /*隐藏下个月的日期*/
  visibility: hidden;
}

// 隐藏上个月 今天 下个月按钮
::v-deep .el-calendar__button-group {
  display: none;
}

::v-deep .el-calendar-table:not(.is-range) td.prev { /*隐藏上个月的日期*/
  visibility: hidden;
}

::v-deep {
  .el-calendar__header {
    justify-content: center;
    border-bottom: 0;
  }

  .el-calendar-table {
    .el-calendar-table__row {
      .current {
        .el-calendar-day {
          padding: 0;

          .dataContent {
            width: 100%;
            height: 100%;
            padding: 8px;
            box-sizing: border-box;

            & > p {
              line-height: 1;
              margin: 0 0 5px 0;
              padding: 0;
            }

            & > div {
              text-align: center;

              .mission-items {
                padding: 0;
                margin: 0;

                &:nth-child(1) {
                  margin-top: 4px;
                }
              }
            }
          }
        }

      }

      .next {
        .el-calendar-day {
          display: none !important;
        }
      }
    }
  }
}
</style>