Vue+Vant实现7天日历展示，并在切换日期时实时变换

效果图：

主要使用 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>

至此完成！！！

测试有效！！！感谢支持！！！