vue自定义日历组件（12日历平铺） pc/移动

---

前言

思路：

1. 获取每个月天数，把每个月天数给数组中的day
2. 再day天数给list的name
3. 获取12个月的年月日
4. 把获取的年月日和选中的年月日对比
5. 如果相等让list中的type变为1，不相等为0

---

疑惑点：
为什么2022-1-1中type改变成了1，到2022-1-2后把2022-1-1中type改成了0，必须要加 break;跳出之后才可以保存之前的type值

效果图：

代码如下：

<template>
  <div id="calendar">
    <div class="choose-head">
      <div class="choose-year">{{ currentYear }} 年工作日历</div>
      <div class="choose-search">
        <el-input
          class="choose-input"
          v-model.trim="currentYear"
          placeholder=""
        >
          {{ currentYear }}</el-input
        >
        <el-button @click="handleChangePickPre(currentYear)">&lt;</el-button>
        <el-button @click="handleChangePickNext(currentYear)">&gt;</el-button>
      </div>
    </div>
    <div
      v-for="item in calendarDataList"
      :key="item.month"
      class="calendarList"
    >
      <div class="title-month">{{ item.month }}</div>
      <!-- 星期 -->
      <ul class="weekdays">
        <li>日</li>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
        <li>六</li>
      </ul>
      <!-- 日期 -->
      <ul class="days">
        <!-- 空格 -->
        <li v-for="item1 in item.xq" :key="item.month + '-day' + item1"></li>
        <!-- 列表 -->
        <li v-for="item1 in item.list" :key="item.month + '-' + item1">
          <span
            v-if="item1.type == 1"
            @click="handleChangeTime(item1.type)"
            class="active"
            >{{ item1.name }}</span
          >
          <span v-else @click="handleChangeTime(item1.type)">{{
            item1.name
          }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "vacationApply",
  data() {
    return {
      currentYear: new Date().getFullYear(), //年
      typeColour: "", //
      dayChecked: "",
      calendar: [
        {
          telit: "2022-1-1",
        },
        {
          telit: "2022-1-3",
        },
        {
          telit: "2022-7-9",
        },
      ],
      calendarDataList: [
        {
          month: "一月",
          months: 1,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "二月",
          months: 2,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "三月",
          months: 3,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "四月",
          months: 4,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "五月",
          months: 5,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "六月",
          months: 6,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "七月",
          months: 7,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "八月",
          months: 8,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "九月",
          months: 9,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "十月",
          months: 10,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "十一月",
          months: 11,
          day: 0,
          xq: 0,
          list: [],
        },
        {
          month: "十二月",
          months: 12,
          day: 0,
          xq: 0,
          list: [],
        },
      ],
      vacation: "",
    };
  },
  created: function () {
    this.handleChangeInitData();
    this.getCurrentDay();
  },
  methods: {
    getCurrentDayCalendar(year) {
      let that = this;
      for (let i = 0; i < that.calendarDataList.length; i++) {
        that.calendarDataList[i].list = [];
        // 获取每月天数
        let thisDate = new Date(year, that.calendarDataList[i].months, 0);
        that.calendarDataList[i].day = thisDate.getDate(); //赋值-获取天数
        for (var j = 1; j <= that.calendarDataList[i].day; j++) {
          //1.拿到了list的天数
          that.calendarDataList[i].list.push({
            name: j,
            type: 0,
          });
        }

        for (var h = 0; h < that.calendarDataList[i].list.length; h++) {
          // 年月日
          that.vacation =
            year +
            "-" +
            that.calendarDataList[i].months +
            "-" +
            that.calendarDataList[i].list[h].name;
          // 用12月的年月日和calendar中年月日对比
          for (let k = 0; k < that.calendar.length; k++) {
            // 如果相等结束循环
            if (this.calendar[k].telit == that.vacation) {
              that.calendarDataList[i].list[h].type = 1;
              break;
            } else {
              that.calendarDataList[i].list[h].type = 0;
            }
          }
        }
        // 获取前月的第一天是星期几，空几格
        let date = new Date(year, this.calendarDataList[i].months - 1, 1);
        this.calendarDataList[i].xq = date.getDay();
      }
    },

    // js获取每个月有多少天
    handleChangeInitData: function (year) {
      if (year != undefined) {
        this.currentYear = year;
        this.getCurrentDayCalendar(year);
      } else {
        let date = new Date();
        let year = date.getFullYear();
        this.getCurrentDayCalendar(year);
      }
    },
    // 点击年
    handleChangePickPre: function (year) {
      year--;
      this.currentYear = year;
      this.handleChangeInitData(year);
    },
    handleChangePickNext: function (year) {
      year++;
      this.currentYear = year;
      this.handleChangeInitData(year);
    },
    // 点击事件
    handleChangeTime(type) {
      debugger;
      let title = "";
      if (type == 1) {
        title = "您确定将假期改成工作日吗？";
      } else {
        title = "您确定将工作日改成假期吗？";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          // this.$message({
          //   type: "success",
          //   message: type == 1 ? "修改成功!" : "取消成功!",
          // });
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
#calendar {
  font-size: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 20px;
}
.title-month {
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  background-color: #000080;
}
.calendarList {
  width: 24%;
}
.choose-head {
  width: 100%;
  padding: 20px;
  background-color: #f0f0f0;
}
.choose-year {
  text-align: center;
  font-size: 25px;
}
.choose-search {
  display: flex;
  flex-flow: flex-end;
  justify-content: end;
}
.choose-input {
  width: 100px !important;
}
.month {
  width: 100%;
  color: #333333;
}
.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  height: 35px;
}
.year-month {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.choose-month {
  text-align: center;
  font-size: 12px;
}
.arrow {
  padding: 15px;
  color: #999999;
}

.month ul li {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.weekdays {
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #999;
  justify-content: space-around;
}
.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
}
.days {
  padding: 10px;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.days li {
  /* calendardatalist-style-type: none; */
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 4px;
  padding-top: 10px;
  font-size: 12px;
  color: #000;
}
.days li .active {
  padding: 6px 6px;
  background: green;
  color: #fff;
}
.days li .other-month {
  padding: 5px;
  color: gainsboro;
}
.days li:hover > span > span {
  padding: 6px 6px;
  background: #e1e1e1;
  color: #fff;
}
</style>