vue-日历表组件

<template>

    <div class="canlendarPanel">

        <div class="canlendar-header">

            <el-row :gutter="20" type="flex" class="row-bg" justify="center">

                <el-col :span="6">

                    <span @click="changeDate('preYear')"><i class="el-icon-d-arrow-left" name="preYear"></i></span>

                    <span @click="changeDate('preMonth')"><i class="el-icon-arrow-left" name="preMonth"></i></span>

                </el-col>

                <el-col :span="10"><p class="currenDate">{{ `${year}年${month}月${day}日` }}</p></el-col>

                <el-col :span="6">

                    <span @click="changeDate('nextMonth')"><i class="el-icon-arrow-right" name="nextMonth"></i></span>

                    <span @click="changeDate('nextYear')"><i class="el-icon-d-arrow-right" name="nextYear"></i></span>

                </el-col>

            </el-row>

        </div>

        <div class="canlendar-main">

            <div class="main-header">

                <span v-for="(item, index) in week">{{ item }}</span>

            </div>

            <div class="main-list">

                <span v-for="index in weekDay" class="disabled">{{ preMonthSize - weekDay + index }}</span>

                <span v-for="index in monthList[month - 1]" :class="{ currentDay: index === day }">{{ index }}</span>

                <span v-for="index in lastWeekDay" class="disabled">{{ index }}</span>

            </div>

        </div>

    </div>

</template>

<script>

    export default {

        name: '',

        components: {}, //局部注册

        data() {

            return {

                year: 0,

                month: 0,

                day: 0,

                week: ['日', '一', '二', '三', '四', '五', '六'],

                monthList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],

                weekDay: 1,

                lastWeekDay: 1,

                // 上一个月有多少天

                get preMonthSize() {return this.month - 1 === 0 ? 31 : this.monthList[this.month - 2]}

            }

        },

        created() {

            // 获取当前日期

            const date = new Date()

            this.year = date.getFullYear()

            this.month = date.getMonth() + 1

            this.day = date.getDate()

            this.initDate()

        },

        methods: {

            // 根据年月日获得为星期几

            getWeekDay(year, month, day) {

                return new Date(`${year}/${month}/${day}`).getDay()

            },

            initDate() {

                (this.year % 4 === 0 && this.year % 100 !== 0) || this.year % 400 === 0 ?  this.monthList[1] = 29 : this.monthList[1] = 28

                // 获得指定年月的1号是星期几

                const firstDay = this.getWeekDay(this.year, this.month, 1)

                // 在1号前面填充多少个上个月的日期

                this.weekDay = firstDay === 7 ? 0 : firstDay

                // 获得最后一天是星期几，往后填充多少个

                const remineDay = this.getWeekDay(

                    this.year,

                    this.month,

                    this.monthList[this.month - 1]

                )

                this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay

            },

            changeDate(type) {

                switch (type) {

                    case 'preYear':

                        this.year -= 1

                        break

                    case 'preMonth':

                        // 当前月份为1月， 上一个月分为12月，年份减1

                        if (this.month === 1) {

                            this.month = 12

                            this.year -= 1

                        } else {

                            this.month -= 1

                        }

                        break

                    case 'nextYear':

                        this.year += 1

                        break

                    case 'nextMonth':

                        // 当前月份为12月， 下个月分为1月，年份加1

                        if (this.month === 12) {

                            this.month = 1

                            this.year += 1

                        } else {

                            this.month += 1

                        }

                        break

                    default:

                        break

                }

                this.initDate()

            }

        },

    }

</script>

<style lang="scss" scoped>

    .canlendarPanel {

         420px;

        height: 440px;

        background-color: rgb(234, 238, 255);

        .canlendar-header {

            line-height: 40px;

            background: rgb(86, 146, 240);

            text-align: center;

            color:#fff;

            font-size: 16px;

            .currenDate {margin: 0 20px;}

            span {cursor: pointer;margin: 10px;}

        }

        .canlendar-main {

            line-height: 40px;

            font-size: 14px;

            .main-header {

                span {display: inline-block; 58px;text-align: center; }

            }

            .main-list {

                span {

                    text-align: center;

                    display: inline-block;

                     40px;

                    height: 40px;

                    margin: 8px;

                    cursor: pointer;

                    border: 1px solid rgb(234, 238, 255);

                }

                .disabled {color: #cccccc;}

                .currentDay {

                    border-radius: 50%;

                    border-color: rgb(3, 92, 236);

                }

            }

        }

    }

</style>