欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue版日歷組件的實(shí)現(xiàn)方法

 更新時(shí)間：2022年04月18日 10:28:32   作者：zxo_apple  
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

開發(fā)背景

常用日歷組件可能滿足不了我們自定義的多種需求（比如樣式），因此通常情況下我們可能需要自己手動(dòng)開發(fā)款日歷，先上圖

開發(fā)流程

1. 根據(jù)常用日歷樣式，我們template部分可以分為三部分（上下月及當(dāng)前月份展示；周日至周六展示；主體日期展示三部分）

1） template部分代碼

<div class="date">
?? ?<div class="header">
?? ??? ?<span class="pre_month" @click="onPreMonth"></span>
?? ??? ?<span v-cloak>{{ date.year }}年{{ date.month }}月</span>
?? ??? ?<span class="next_month" @click="onNextMonth"></span>
?? ?</div>
?? ?<div class="days">
?? ??? ?<table v-cloak border="0" cellspacing="0" cellpadding="0">
?? ??? ??? ?<tr class="label">
?? ??? ??? ??? ?<td>周日</td>
?? ??? ??? ??? ?<td>周一</td>
?? ??? ??? ??? ?<td>周二</td>
?? ??? ??? ??? ?<td>周三</td>
?? ??? ??? ??? ?<td>周四</td>
?? ??? ??? ??? ?<td>周五</td>
?? ??? ??? ??? ?<td>周六</td>
?? ??? ??? ?</tr>
?? ??? ??? ?<tr class="row" v-for="week in weeks" :key="week[0].date">
?? ??? ??? ??? ?<td
?? ??? ??? ??? ??? ?class="column"
?? ??? ??? ??? ??? ?v-for="day in week"
?? ??? ??? ??? ??? ?:key="day.date"
?? ??? ??? ??? ??? ?v-bind:day="day.date"
?? ??? ??? ??? ??? ?@click="onSelectDay(day)"
?? ??? ??? ??? ?>
? ? ? ? ? ? <span
?? ??? ??? ??? ?v-bind:class="[{
?? ??? ??? ??? ? ? checked: selectedDate == day.date,
?? ??? ??? ??? ? ? weekend: day.isWeekend,
? ? ? ? ??? ??? ?}]"
?? ??? ??? ??? ??? ?v-if="day.month == date.month">{{ day.v }}</span>
?? ??? ??? ??? ?</td>
?? ??? ??? ?</tr>
?? ??? ?</table>
?? ?</div>
</div>

2）js部分代碼

// 生成日歷函數(shù)
initDate(month) {
?? ?var weeks = [] // template中用來渲染日歷的數(shù)組
?? ?var firstDay = this.moment(month, 'YYYY-MM') // 當(dāng)月1號
?? ?var week = firstDay.format('d') // 當(dāng)月1號是周幾 (比如周五則week = 5)
?? ?var start = firstDay.subtract(week, 'days') // 日歷上展示的第一個(gè)數(shù)(上個(gè)月的二十幾號之類的，用于補(bǔ)齊日歷)
?? ?for (var i = 0; i < 6; i++) { // 通常日歷為6行7排 42天，因此兩個(gè)for循環(huán)
?? ??? ?var days = []
?? ??? ?for (var j = 0; j < 7; j++) {
?? ??? ??? ?var day = {}
?? ??? ??? ?day.num = start.toObject().date // 當(dāng)前號數(shù) 22
?? ??? ??? ?day.date = start.format('YYYY-MM-DD') // 返回值為2021-10-22
?? ??? ??? ?day.month = start.format('MM') // 當(dāng)前號數(shù)對應(yīng)的月份，比如日歷上個(gè)月27號則day.month = 9;這個(gè)月1號day.month = 10
?? ??? ??? ?day.isWeekend = (start.format('E') === '6' || start.format('E') === '7') ? true : false // 是否是周末，用于UI區(qū)分周末和平時(shí)的顏色
?? ??? ??? ?start.add(1, 'days') ?// 沒循環(huán)一次日期加一天
?? ??? ??? ?days.push(day)
?? ??? ?}
?? ??? ?weeks.push(days)
?? ?}
?? ?this.date.year = this.moment(month).year()
?? ?this.date.month = this.moment(month, 'YYYY-MM').add(0, 'month').format('MM')
?? ?this.date.preMonth = this.moment(month, 'YYYY-MM').add(-1, 'month').format('YYYY-MM')
?? ?this.date.nextMonth = this.moment(month, 'YYYY-MM').add(1, 'month').format('YYYY-MM')
?? ?return weeks
}

初始化完成后調(diào)用（用于template中渲染）

mounted() {
?? ?const currDate = new Date()
?? ?this.weeks = this.initDate(this.moment(currDate).format('YYYY-MM'))
}

上個(gè)月、下個(gè)月處理

// 上一個(gè)月
onPreMonth() {
?? ?const month = this.date.preMonth
?? ?this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
},

// 下一個(gè)月
onNextMonth() {
?? ?const month = this.date.nextMonth
?? ?this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
}

選中某一天

onSelectDay(day) {
?? ?if (!this.isSelectDay) return false
?? ?if (day.month === this.date.month) {
?? ??? ?this.selectedDate = day.date
?? ?}
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論