vue版日歷組件的實現(xiàn)方法
更新時間：2022年04月18日 10:28:32 作者：zxo_apple
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
開發(fā)背景
常用日歷組件可能滿足不了我們自定義的多種需求（比如樣式），因此通常情況下我們可能需要自己手動開發(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') // 日歷上展示的第一個數(shù)(上個月的二十幾號之類的，用于補齊日歷)
?? ?for (var i = 0; i < 6; i++) { // 通常日歷為6行7排 42天，因此兩個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)的月份，比如日歷上個月27號則day.month = 9;這個月1號day.month = 10
?? ??? ??? ?day.isWeekend = (start.format('E') === '6' || start.format('E') === '7') ? true : false // 是否是周末，用于UI區(qū)分周末和平時的顏色
?? ??? ??? ?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'))
}上個月、下個月處理
// 上一個月
onPreMonth() {
?? ?const month = this.date.preMonth
?? ?this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
},
// 下一個月
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)文章
這篇文章主要介紹了在VUE3中如何禁止網(wǎng)頁返回到上一頁,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue實現(xiàn)各種文件文檔下載及導(dǎo)出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了Vue項目通過network的ip地址訪問注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue.js中observer模塊的相關(guān)資料，文中通過原理分析介紹還是相對的詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要介紹了vue多頁面項目中路由如何使用history模式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
uniapp使用條件編譯#ifdef（跨平臺設(shè)備兼容）
這篇文章主要介紹了uniapp使用條件編譯#ifdef（跨平臺設(shè)備兼容）,需要的朋友可以參考下2022-12-12
vue3的setup語法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語法如何自定義v-model為公用hooks，文章分為兩個部分介紹，簡單介紹vue3的setup語法如何自定義v-model和如何提取v-model語法作為一個公用hooks2022-07-07