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ù)(上個月的二十幾號之類的，用于補(bǔ)齊日歷)
?? ?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中簡單使用Mock.js方法,mock.js在模擬后端接口數(shù)據(jù)響應(yīng)與協(xié)調(diào)統(tǒng)一前后端開發(fā)接口規(guī)范方面有著重要的應(yīng)用,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue去除#問題處理經(jīng)過，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue如何在vue.config.js文件中導(dǎo)入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue-cli-service?build?自定義參數(shù)方式
這篇文章主要介紹了vue-cli-service?build?自定義參數(shù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Electron+vite+vuetify項目搭建的流程和方法
最近想用Electron來進(jìn)行跨平臺的桌面應(yīng)用開發(fā),同時想用vuetify作為組件,于是想搭建一個這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06
vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
watch 是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點，一般會用作和 computed 進(jìn)行比較。那么本文就來帶大家從源碼理解 watch 的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)2022-10-10
Vue項目中使用WebUploader實現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊開發(fā)的一個簡單的以 HTML5為主 ， FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項目中使用WebUploader實現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07
vue實現(xiàn)進(jìn)入某個頁面后替換地址欄路徑的操作方法
vue頁面在實際開發(fā)中,經(jīng)常會遇到改變url參數(shù),重新加載頁面數(shù)據(jù)的需求,但是只改變頁面url并不會觸發(fā)組件的生命周期,這就需要用其他方法來實現(xiàn)了,本文重點介紹vue實現(xiàn)進(jìn)入某個頁面后替換地址欄路徑的操作方法,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要介紹了antd多選下拉框一行展示的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10