vue3.0+ts简单的日历实现

<template>
    <div class="calendar">
        <div class="calendar-switch">
            <div class="icon" @click="lowerClick()">
                &lt;
            </div>
            <div class="title">
                {{ year }}-{{ month > 9 ? month : "0" + month }}
            </div>
            <div class="icon" @click="upperCLick()">
                &gt;
            </div>
        </div>
        <div class="calendar-content">
            <div class="calendar-content-week">
                <div class="calendar-content-week-item" v-for="(item,index) in weekList" :key="index">
                    {{ item }}
                </div>
            </div>
            <div class="calendar-content-day">
                <div class="calendar-content-day-item"
                     v-for="(item,index) in calendarList"
                     :key="index">
                    {{ item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, computed } from "vue";

export default defineComponent({
    name: "calendar",
    setup() {
        /* 定义内容 */
        const weekList = reactive<string[]>(["周日", "周一", "周二", "周三", "周四", "周五", "周六"]);
        let year = ref<number>(0);
        let month = ref<number>(0);
        let day = ref<number>(0);
        /* 生命周期 */
        onMounted(() => {
            getInitDate();
        });
        /* 获取当前年月日 */
        let getInitDate = () => {
            const date = new Date();
            year.value = date.getFullYear();
            month.value = date.getUTCMonth() + 1;
            day.value = date.getDate();
        };
        /* 获取天数 */
        let calendarList = computed(() => {
            let arr = [];
            /* 获取当前月份多少天 */
            const nowDays = getDays(year.value, month.value);
            /* 获取上个月多少天 */
            const upperDays = getDays(year.value, month.value - 1);
            /* 获取当前月份多少天 */
            const nowWeek = getWeek(year.value, month.value);
            /* 将这个月多少天加入数组days */
            for (let i = 1; i <= nowDays; i++) {
                arr.push(i);
            }
            /* 将下个月要显示的天数加入days */
            for (let i = 1; i <= 42 - nowDays - nowWeek; i++) {
                arr.push(i);
            }
            /* 将上个月要显示的天数加入days */
            for (let i = 0; i < nowWeek; i++) {
                arr.unshift(upperDays - i);
            }
            return arr;
        });
        /* 得到当前年这个月分有多少天 */
        let getDays = (Y: number, M: number): number => {
            return new Date(Y, M, 0).getDate();
        };
        /* 得到当前年，这个月的一号是周几 */
        let getWeek = (Y: number, M: number): number => {
            const now = new Date();
            now.setFullYear(Y);
            now.setMonth(M - 1);
            now.setDate(1);
            return now.getDay();
        };
        /* 月份切换增加 */
        let upperCLick = () => {
            if (month.value !== 12) {
                month.value = month.value + 1;
            } else {
                year.value = year.value + 1;
                month.value = 1;
            }
        };
        /* 月份切换减少 */
        let lowerClick = () => {
            if (month.value !== 1) {
                month.value = month.value - 1;
            } else {
                year.value = year.value - 1;
                month.value = 12;
            }
        };
        /* return出去才能使用 */
        return {
            weekList,
            calendarList,
            year,
            month,
            day,
            getInitDate,
            upperCLick,
            lowerClick
        };
    }
});
</script>

<style lang="less" scoped>
.calendar-content-item {
    box-sizing: border-box;
    flex: 0 calc(100% / 7);
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:nth-child(1) {
        border-left: 1px solid #ececec;
    }
}

.calendar {
    width: 100%;
    height: 100%;

    .calendar-switch {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        line-height: 50px;

        .icon {
            cursor: pointer;
            font-size: 16px;
            color: #2c3e50;
            user-select: none;
        }

        .title {
            margin: 0 20px;
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
    }

    .calendar-content {
        .calendar-content-week {
            display: flex;
            border-top: 1px solid #ececec;

            .calendar-content-week-item {
                height: 36px;
                .calendar-content-item();
            }
        }

        .calendar-content-day {
            display: flex;
            flex-wrap: wrap;

            .calendar-content-day-item {
                height: 52px;
                transition: all 0.3s;
                .calendar-content-item();

                &:hover {
                    background: #2c3e50;
                    color: #fff;
                }
            }
        }
    }
}
</style>