Vue+Vant實現7天日歷展示并在切換日期時實時變換功能

更新時間：2024年10月14日 11:50:14 作者：小破孩呦

本文介紹了如何利用Vue和Vant框架結合moment.js插件來實現一個7天日歷展示功能,在這個功能中,用戶可以在切換日期時看到界面的實時變化,此外,文章還提供了代碼實現和效果測試的詳細步驟,幫助開發(fā)者能夠順利完成類似的項目開發(fā)

效果圖：

主要使用 moment.js 插件完成

HTML部分

        <div class="day-content">
            <div class="day-content-t">
                <div>{{ monthVal }}</div>
                <div @click="onCalendar()">更多>></div>
            </div>
            <div class="day-content-b">
                <div class="day-week">
                    <div v-for="item in weekList">{{ item }}</div>
                </div>
                <div class="day-list">
                    <div v-for="item in dayList" :class="{ 'active' : todayVal === item }">{{ item }}</div>
                </div>
            </div>
        </div>
        <!-- 日歷 -->
        <van-calendar v-model="calendarShow" :show-confirm="false" @confirm="onConfirm" color="#007AFF" />

js部分

<script>
import moment from 'moment';
export default {
    components: {},
    data() {
        return {
            weekList: [],
            dayList: [],
            monthVal: '',
            todayVal: '',
            calendarShow: false,
        }
    },
    created() {
        this.monthVal = moment().format('YYYY年MM月');
        let month = moment().format('YYYY-MM-DD');
        this.todayVal = moment().format('DD');
        this.dayInit(month,this.todayVal);
    },
    methods: {
        dayInit(month,day){
            this.weekList = [];
            this.dayList = [];
            // 初始化周
            const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
            const todayWeek = weekDays[moment(month).day()];
            const frontWeek1 = weekDays[moment(month).subtract(3, 'days').day()];
            const frontWeek2 = weekDays[moment(month).subtract(2, 'days').day()];
            const frontWeek3 = weekDays[moment(month).subtract(1, 'days').day()];
            const afterWeek1 = weekDays[moment(month).add(1, 'days').day()];
            const afterWeek2 = weekDays[moment(month).add(2, 'days').day()];
            const afterWeek3 = weekDays[moment(month).add(3, 'days').day()];
            this.weekList.push(frontWeek1,frontWeek2,frontWeek3,todayWeek,afterWeek1,afterWeek2,afterWeek3);
            // 初始化日期
            const today = day;
            const frontDay1 = moment(month).subtract(3, 'days').format('DD');
            const frontDay2 = moment(month).subtract(2, 'days').format('DD');
            const frontDay3 = moment(month).subtract(1, 'days').format('DD');
            const afterDay1 = moment(month).add(1, 'days').format('DD');
            const afterDay2 = moment(month).add(2, 'days').format('DD');
            const afterDay3 = moment(month).add(3, 'days').format('DD');
            this.dayList.push(frontDay1,frontDay2,frontDay3,today,afterDay1,afterDay2,afterDay3);
        },
        onCalendar(){
            this.calendarShow = true;
        },
        formatDate(date) {
            this.monthVal = `${date.getFullYear()}年${date.getMonth() + 1}月`;
            let month = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
            this.todayVal = date.getDate();
            this.dayInit(month,this.todayVal);
        },
        onConfirm(date){
            this.calendarShow = false;
            this.formatDate(date)
        },
    }
}
</script>

css部分

<style lang="scss" scoped>
.day-content{
    background-color: #007AFF;
    padding: 0.3rem;
    color: #fff;
    .day-content-t{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        div:nth-child(1){
            font-size: 16px;
        }
        div:nth-child(2){
            font-size: 12px;
        }
    }
    .day-content-b{
        .day-week,.day-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 0.4rem 0;
            div{
                text-align: center;
                width: 0.6rem;
                height: 0.6rem;
                line-height: 0.6rem;
            }
        }
        .active{
            background-color: #0054B0;
            border-radius: 50%;
        }
    }
}
</style>

至此完成?。?！

測試有效！?。「兄x支持?。?！

到此這篇關于Vue+Vant實現7天日歷展示并在切換日期時實時變換的文章就介紹到這了,更多相關vue vant切換日期時實時變換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: