element整理＜el-calendar＞日历组件-假期（整理）

<template>
  <div class="clientRegulate">
    <div class="titleInfo">非工作日</div>
    <div class="table">
    <el-calendar>
        <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp">
          {{ data.day.split('-').slice(1).join('-') }}
          <div style="width:100%;" v-for="item in scheduleDatas" :key="item">
            <el-tag type="danger"
              v-if="(item.workingDay).indexOf(data.day.split('-').join('-'))!=-1">
              {{item.content}}
            </el-tag>
          </div>
        </div>
      </el-calendar>
    <el-calendar>
        <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp">
          {{ data.day.split('-').slice(1).join('-') }}
          <div style="width:100%;" v-for="item in scheduleData" :key="item">
            <el-tag type="danger"
              v-if="(item.workingDay).indexOf(data.day.split('-').join('-'))!=-1">
              {{item.content}}
            </el-tag>
          </div>
        </div>
      </el-calendar>
      <el-calendar>
        <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp">
          {{ data.day.split('-').slice(1).join('-') }}
          <div style="width:100%;" v-for="item in scheduleData" :key="item">
            <el-tag type="danger"
              v-if="(item.workingDay).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
              {{item.content}}
            </el-tag>
          </div>
        </div>
      </el-calendar>
      <el-calendar v-model="calendar">
        <div slot="dateCell" slot-scope="{ data }" @click="allcalendar(data)" class="temp">
          <p :class="data.isSelected ? 'is-selected-1' : ''">
            {{ data.day.split("-").slice(2).join("-") }}
          </p>
        </div>
      </el-calendar>
    </div>
  </div>
</template>
<script>
  //新增和编辑的表单一样，共用一个
  export default {
    name: "",
    components: {},
    data() {
      return {
        value: new Date(),
        calendar: '',
        scheduleDatas: [{
            workingDay: "2022-01-06",
            content: "休",
          },
          {
            workingDay: "2022-01-06",
            content: "休",
          },
        ],
        scheduleData: [{
            workingDay: "02",
            content: "假期",
          },
          {
            workingDay: "03",
            content: "假期",
          },
          {
            workingDay: "04",
            content: "假期",
          },
          {
            workingDay: "05",
            content: "假期",
          },
          {
            workingDay: "06",
            content: "假期",
          },
          {
            workingDay: "07",
            content: "假期",
          },
        ],
      };
    },
    created() {
      this.$nextTick(() => {
        // 点击前一个月
        let prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
        );
        prevBtn.addEventListener("click", e => {
          let d = new Date(this.timeValue);
          let resDate1 = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1)); //2020-08
          var unn = resDate1.split("-")
          // alert(unn)
          console.log(unn[0])
          console.log(unn[1])
          this.giveTake(unn[0],unn[1])
        })
        //点击下一个月
        let nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
        );
        nextBtn.addEventListener("click", e => {
          let d = new Date(this.timeValue);
          let resDate2 = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1)); //2020-10
          var unn = resDate2.split("-")
          // alert(unn)
          console.log(unn[0])
          console.log(unn[1])
          this.giveTake(unn[0],unn[1])
        })
        //点击今天
        let todayBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
        );
        todayBtn.addEventListener("click", e => {
          let d = new Date(this.timeValue);
          let resDate3 = d.getFullYear() + '-' + this.handleTime((d.getMonth() + 1)); //2020-09
          // var unn = resDate3.split("-")
          // alert(unn)
          // console.log(unn[0])
          // console.log(unn[1])
          let nowDate = new Date();
          let date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
          }
          this.giveTake(date.year.toString(),date.month.toString())
        })
      });
    },
    watch: {},
    methods: {
      //处理时间
      handleTime(s) {
        return s < 10 ? '0' + s : s
      },
      allcalendar(data) {
        this.calendar = data.day
        alert(this.calendar)
      },
    },
    mounted() {
      // 初始化调用接口
      // this.adminOption()
    }
  };
</script>
<style lang="less" scoped>
  /deep/.el-calendar-day {
    box-sizing: border-box;
    padding: 5px;
    height: 80px;
  }
  .el-calendar {
    text-align: center;
  }
  .temp {
    padding: 20px;
  }
  .is-selected-1 {
    width: 100%;
    height: 100%;
  }
  .titleInfo {
    margin-top: 20px;
    margin-left: 20px;
  }
  .table {
    background: #ffffff;
    border-radius: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
</style>