vue编写组件 根据指定日期获取一周内所有 日期与农历日期展示 并标记当天

首先 我们要引入一下对应的第三方依赖

npm install --save chinese-lunar-calendar sass sass-loader

这里 我们需要 chinese-lunar-calendar 将日期变成农历日期的工具
sass是因为 我这里为了方便 用了 sass写样式

组件代码如下

<template>
    <header
      class = "skeleton"
    >
        <div
          class = "day"
          v-for = "item in weeklySet"
          :key = "item.id"
          v-bind:class="{currentDate:item.id == currentWeek}"
        >
            <div class = "top">{{ item.label }}</div>
            <div
              class = "center"
            >{{ item.date }}</div>
            <div>{{ item.calendar }}</div>
        </div>
    </header>
</template>

<script>
import { getLunar } from 'chinese-lunar-calendar'
export default {
    data() {
        return {
            monthComparison: {
                1: 31,
                2: null,
                3: 31,
                4: 30,
                5: 31,
                6: 30,
                7: 31,
                8: 31,
                9: 30,
                10: 31,
                11: 30,
                12: 31
            },
            weeklySet: [
                {
                    id: 0,
                    date: null,
                    label: "周日",
                    calendar: ""
                },
                {
                    id: 1,
                    date: null,
                    label: "周一",
                    calendar: ""
                },
                {
                    id: 2,
                    date: null,
                    label: "周二",
                    calendar: ""
                },
                {
                    id: 3,
                    date: null,
                    label: "周三",
                    calendar: ""
                },
                {
                    id: 4,
                    date: null,
                    label: "周四",
                    calendar: ""
                },
                {
                    id: 5,
                    date: null,
                    label: "周五",
                    calendar: ""
                },
                {
                    id: 6,
                    date: null,
                    label: "周六",
                    calendar: ""
                }
            ],

        }
    },
    methods: {
        enlargeDate(item ,currentWeek , agencyYear, currentMonth, referenceDate) {
            let index = item.id;
            let pendingDate = referenceDate;
            let Month = currentMonth;
            let year = agencyYear;
            while(currentWeek > index){
                if((pendingDate - 1) < 1) {
                    if(Month == 1) {
                        year -= 1;
                        Month = 12;
                        pendingDate = 31;
                    }else{
                        Month -= 1;
                        pendingDate = this.monthComparison[Month];
                    }
                }else{
                    pendingDate -= 1;
                }
                index ++;
            }
            item.date = pendingDate;
            item.calendar = this.getLunar(year,Month,pendingDate);
            return item
        },
        shrinkDate(item ,currentWeek , agencyYear, currentMonth, referenceDate) {
            let index = item.id;
            let pendingDate = referenceDate;
            let Month = currentMonth;
            let year = agencyYear;
            while(currentWeek < index){
                if((pendingDate + 1) > this.monthComparison[Month]) {
                    if(Month == 12) {
                        year += 1;
                        Month = 1;
                        pendingDate = 1;
                    }else{
                        Month += 1;
                        pendingDate = 1;
                    }
                }else{
                    pendingDate += 1;
                }
                index --;
            }
            item.date = pendingDate;
            item.calendar = this.getLunar(year,Month,pendingDate);
            return item
        },
        getLunar(agencyYear,currentMonth,referenceDate) {
            let data = getLunar(agencyYear, currentMonth, referenceDate);
            return data.dateStr.split('月')[1]?data.dateStr.split('月')[1]:data.dateStr.split('月')[0]
        },
        ConversionDate(date) {
            const agencyYear = date.getFullYear();
            const referenceDate = date.getDate();
            const currentWeek = date.getDay();
            const currentMonth = date.getMonth() + 1;
            this.weeklySet = this.weeklySet.map(item => {
                if(item.id > currentWeek) {
                    item = this.shrinkDate(item ,currentWeek , agencyYear, currentMonth, referenceDate);
                }
                if(item.id < currentWeek) {
                    item = this.enlargeDate(item ,currentWeek , agencyYear, currentMonth, referenceDate);
                }
                return item
            })
            console.log(this.weeklySet);
        },
        getAweekago(condition){
            const date = condition?new Date(condition):new Date();
            const agencyYear = date.getFullYear();
            const referenceDate = date.getDate();
            const currentWeek = date.getDay();
            const currentMonth = date.getMonth() + 1;
            this.monthComparison[2] = this.backDay(agencyYear);
            this.weeklySet[currentWeek].date = referenceDate;
            this.weeklySet[currentWeek].calendar = this.getLunar(agencyYear,currentMonth,referenceDate);
            this.currentWeek = currentWeek;
            this.ConversionDate(date);
        },
        backDay(year) {
            return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)?29:28;
        }
    },
    created() {
        this.getAweekago();
    }
}
</script>

<style lang='scss' scoped>
.skeleton {
    padding-left: 76px;
    width: calc(100% - 76px);
    height: 112px;
    display: flex;
    .day{
        flex: 1;
        display: flex;
        flex-direction:column;
        font-size: 14px;
        div{
            display: flex;
            justify-content: center;
        }
        .top{
            padding-top: 12px;
        }
        .center{
            height: 28px;
            width: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 6px auto;
            border-radius: 50%;
        }
    }.currentDate{
        color: #21B1FF;
        .center{
            color: #FFFFFF;
            background: #21B1FF;
        }
    }
}
</style>

感兴趣的朋友可以拿出做个二开什么的
效果如下

跨年跨月这些我都是写了判断的
例如 我们将created 代码修改如下

created() {
    this.getAweekago("2020-12-29");
}

改为 2020-01-01

大家都可以自己那个来玩一玩 自认为还是可以去做一个拓展的文章来源地址https://www.toymoban.com/news/detail-449572.html

到了这里，关于vue编写组件 根据指定日期获取一周内所有 日期与农历日期展示 并标记当天的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！