vue中获取某年中所有周末，支持拖拽选择日期

<template>
  <div class='deliveryConfiguration'>
    <div class="table-div">
      <p class="table-div-title">节假日维护</p>
      <el-select class="el-input-year"
                 v-model="year"
                 @change="yearChange"
                 placeholder="请选择年份">
        <el-option v-for="item in yearsOption"
                   :key="item"
                   :value="item"
                   :label="item"></el-option>
      </el-select>
      <div class="month-content">
        <table @mouseleave="mouseleave">
          <tr v-for="(item, index) in yearArr"
              :key="index">
            <td>{{index + 1}}月</td>
            <td v-for="(itemS, indexS) in 31"
                :key="indexS">
              <div class="td-button"
                   v-if="item[itemS - 1]"
                   type="text"
                   @mouseenter="onSelectMouseenter(item, index, itemS, indexS)"
                   @mousedown="onSelectMousedown(item, index, itemS, indexS)"
                   @mouseup="onSelectMouseup"
                   :class="item[itemS - 1].isWeekend ? 'bg-yellow' : 'bg-green'">
                {{item[itemS - 1].day}}
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div class="table-div-edit">
        <el-button type="info"
                   @click="getWeekend">添加周末</el-button>
        <el-button type="info"
                   @click="resetWeekend">重置</el-button>
        <el-button type="info">确认修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      isOrdinaryYear: false,
      year: '',
      yearsOption: [],
      monthArr: [],
      yearArr: [],
      onClickFlag: false
    };
  },

  created() {
    this.getYearOption();
    this.monthInitData();
  },

  methods: {
    getYearOption() {
      let year = new Date().getFullYear();
      this.yearsOption = [year - 1, year , year + 1, 2000]
    },
    yearChange() {
      this.monthInitData();
    },
    getDateRange(year, month) {
      // let myDate1 = new Date(year, month, 1);
      let myDate2 = new Date(year, month, 0);
      // console.log(month + 1 + '月', myDate1.getDate(), myDate2.getDate());
      this.monthArr = [];
      for (let i = 1; i <= myDate2.getDate(); i++) {
        this.monthArr.push({
          day: i,
          date: year + '-' + (month < 10 ? '0' + month : month) + '-' + i,
          isWeekend: false
        });
      }
    },
    monthInitData() {
      this.yearArr = [];
      for (let i = 1; i <= 12; i++) {
        this.getDateRange(this.year, i);
        this.yearArr.push(this.monthArr);
      }
      // console.log(this.yearArr, 'this.yearArrthis.yearArr');
    },
    onSelectMouseenter(item, index, itemS, indexS) {
      if (this.onClickFlag) {
        // console.log(this.onClickFlag, '鼠标按下移动');
        this.yearArr[index][indexS].isWeekend =
          !this.yearArr[index][indexS].isWeekend;
      }
    },
    onSelectMousedown(item, index, itemS, indexS) {
      // console.log(this.onClickFlag, '鼠标按下');
      this.onClickFlag = true;
      this.yearArr[index][indexS].isWeekend =
        !this.yearArr[index][indexS].isWeekend;
    },
    onSelectMouseup() {
      // console.log(this.onClickFlag, '鼠标抬起');
      this.onClickFlag = false;
      console.log(this.yearArr, 'yearArr');
    },
    mouseleave() {
      this.onClickFlag = false;
    },
    getMonthLength(date) {
      let d = new Date(date);
      d.setMonth(d.getMonth() + 1);
      d.setDate('1');
      d.setDate(d.getDate() - 1);
      return d.getDate();
    },
    getWeekend() {
      let arr = [];
      let year = this.year;
      for (let i = 1; i <= 12; i++) {
        let days = this.getMonthLength(`${year}-${i}-01`);
        for (let j = 1; j <= days; j++) {
          if (
            new Date(`${year}-${i}-${j}`).getDay() === 0 ||
            new Date(`${year}-${i}-${j}`).getDay() === 6
          ) {
            arr.push(`${year}-${i < 10 ? '0' + i : i}-${j}`);
          }
        }
      }
      for (let y = 0; y < this.yearArr.length; y++) {
        for (let d = 0; d < this.yearArr[y].length; d++) {
          this.yearArr[y][d].isWeekend = false;
        }
      }
      for (let y = 0; y < this.yearArr.length; y++) {
        for (let d = 0; d < this.yearArr[y].length; d++) {
          for (let j = 0; j < arr.length; j++) {
            if (arr[j] === this.yearArr[y][d].date) {
              this.yearArr[y][d].isWeekend = true;
            }
          }
        }
      }
    },
    resetWeekend() {
      for (let y = 0; y < this.yearArr.length; y++) {
        for (let d = 0; d < this.yearArr[y].length; d++) {
          this.yearArr[y][d].isWeekend = false;
        }
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.deliveryConfiguration {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  p {
    margin: 0;
    padding: 0;
  }
  .table-div {
    .table-div-title {
      margin-bottom: 10px;
    }
    .el-input-year {
      margin-left: 40px;
    }
    .month-content {
      width: 100%;
      text-align: center;
      table,
      td,
      th {
        border: 1px solid black;
        text-align: center;
      }
      table {
        margin: 0 auto;
        margin-top: 10px;
        width: 95%;
        border-collapse: collapse;
        td {
          width: 3%;
        }
        th {
          padding: 6px;
        }
        .td-button {
          width: 100%;
          height: 28px;
          line-height: 28px;
          color: black;
        }
        .bg-yellow {
          background-color: yellow;
        }
        .bg-green {
          background-color: #00ff00;
        }
      }
    }
    .table-div-edit {
      margin: 0 auto;
      margin: 20px 95px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>