小編給大家分享一下使用Vue實(shí)現(xiàn)日歷小插件的示例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)主營(yíng)豐臺(tái)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開發(fā),豐臺(tái)h5微信小程序開發(fā)搭建,豐臺(tái)網(wǎng)站營(yíng)銷推廣歡迎豐臺(tái)等地區(qū)企業(yè)咨詢
先看下效果圖吧, 如下
實(shí)現(xiàn)關(guān)鍵點(diǎn):
1.組件的復(fù)用以及父子組件傳值
很明顯每年每個(gè)月的月歷樣式(數(shù)據(jù)不一樣)是一致的,那么自然而然思路就是把每個(gè)月作為一個(gè)公用組件進(jìn)行復(fù)用十二次,這樣就避免了多次重復(fù)的代碼。每個(gè)組件不一樣的地方在于年份和月份,而這兩個(gè)數(shù)據(jù)我們可以由父組件向子組件進(jìn)行傳值來(lái)告訴子組件。關(guān)鍵代碼如下:
<template> <div class="wrap"> //months是一個(gè)包含十二個(gè)月名字的數(shù)組,用v-for對(duì)其進(jìn)行循環(huán)渲染,并且把月份的index傳給子組件 <div v-for='(items, index) in months' v-if="index == monthIndex"> <month :monthName='items' :year='year' //年份傳給子組件,年份在mounted里面計(jì)算得出 :monthIndex='index' //月份傳給子組件 :day='today'//當(dāng)日日期傳給子組件 :key='index' > </month> </div> </div> </template> //data部分 data () { return { monthIndex: 0, months:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], year:-1, day:-1, } },
2.實(shí)現(xiàn)默認(rèn)當(dāng)日選中并且切換月份的時(shí)候其他月份不會(huì)有選中樣式
在父組件的mounted鉤子里面我們會(huì)計(jì)算當(dāng)年當(dāng)月當(dāng)日,并傳給子組件,子組件的有個(gè)day屬性用于存儲(chǔ)父組件傳來(lái)的today的值,day屬性默認(rèn)值為-1,父組件傳值過(guò)去之后會(huì)給day屬性重新賦值
//父組件 mounted () { let myDate = new Date(); this.monthIndex = myDate.getMonth(); this.year = myDate.getFullYear(); this.today = myDate.getDate() - 1; },
在子組件循環(huán)渲染每天的日期的時(shí)候會(huì)設(shè)置一個(gè)動(dòng)態(tài)綁定樣式類似于一下代碼(實(shí)際代碼略微不一樣):
//index值為0-41 <div v-for="(item, index) in days" :key='index' class="dayIndex" @click='choose(index)' :class="{choose: day == index}"> //動(dòng)態(tài)綁定樣式
當(dāng)data中的屬性day的值和index的值相等的時(shí)候,就會(huì)給div添加一個(gè)choose的樣式,但是這樣有一個(gè)問(wèn)題——那就是每個(gè)月的該index的div都會(huì)有這個(gè)class樣式。
解決辦法:在mounted里面做個(gè)判斷,如果為當(dāng)月,則給data里面的day賦值,否則不做改動(dòng)仍為-1,-1在循環(huán)渲染日期的時(shí)候沒(méi)有對(duì)應(yīng)的index,所以不會(huì)產(chǎn)生選中樣式。
if (new Date().getMonth() == this.monthIndex) { this.chooseIndex = this.day + this.firstDayIndex; }
3.如何計(jì)算本月月歷中上個(gè)月多余的天數(shù)和下個(gè)月需要加進(jìn)來(lái)的天數(shù)以及日期?、
這是該日歷里面比較復(fù)雜和關(guān)鍵的一點(diǎn),我們可以看到每個(gè)月的日歷總共需要42天,除開本月天數(shù),肯定還會(huì)包括上個(gè)月部分日期和下個(gè)月部分日期,所以該問(wèn)題涉及以下多個(gè)因素:
1).本月1號(hào)前應(yīng)該留給上個(gè)月多少天數(shù)
2).上個(gè)月最后的日期是不一樣的,有28 29 30 31
3).本月的天數(shù)和留給下個(gè)月的天數(shù)
4).非本月的日期需要置灰
這四個(gè)問(wèn)題可以分別用下面的思路來(lái)解決:
問(wèn)題1:計(jì)算本月的1號(hào)是周幾,如果是周一那么前面應(yīng)當(dāng)留1天給上個(gè)月(日歷從周日開始計(jì)算),如果是周二就應(yīng)當(dāng)留2天
每月1號(hào)可以用以下函數(shù)求得
new Date(year + '/' + monthIndex + '/' + '01').getDay();
問(wèn)題2:可以在data里面建立一個(gè)hash表----monthLastDay(js對(duì)象),對(duì)應(yīng)出每個(gè)月的天數(shù),那么上個(gè)月的最后一天的日期就可以用monthLastDay[monthIndex - 1]求得,其中如果上個(gè)月是二月份要單獨(dú)判斷是否為閏年
monthLastDay:{ 0:31, 1:28, 2:31, 3:30, 4:31, 5:30, 6:31, 7:31, 8:30, 9:31, 10:30, 11:31 },
getMonthLastDay (year, month){ if (month != 1) { return this.monthLastDay[month]; } else { //this.leapyear是布爾值 它表示該年是否為閏年 if (this.leapyear) { return 29; } else { return 28; } } },
得到上個(gè)月最后一天的日期以及本月1號(hào)為周幾之后我們就可以知道需要填入的上個(gè)月日期有哪些了,可以往days數(shù)組(本月日歷渲染數(shù)據(jù)存儲(chǔ)數(shù)組)里push了。
問(wèn)題3:這個(gè)問(wèn)題就簡(jiǎn)單很多了,因?yàn)楸驹氯諝v一共有42天,我們?cè)谝粋€(gè)i<42的for循環(huán)里面對(duì)數(shù)組days進(jìn)行push,在push完上月日期和本月日期之后,把日期重置為1,繼續(xù)push到for循環(huán)結(jié)束就好了
//index為上個(gè)月最后一天的日期 lastDayNum為上個(gè)月剩余天數(shù) generateDays (index, lastDayNum) { let temp = 1; //這個(gè)for循環(huán)是push上個(gè)月的剩余日期, for (let i = lastDayNum; i > 0; i--) { this.days.push([(index - i + 1).toString()]); } //index置1,開始push本月天數(shù) index = 1; for (let i = 0; i < 42 - lastDayNum; i++) { //閏年二月 if (this.leapyear) { if (index <= 29) { this.days.push(index.toString()); } //非閏年月份 } else if (index <= this.monthLastDay[this.monthIndex]) { this.days.push(index.toString()); //這個(gè)else是push下個(gè)月的日期 } else { this.days.push([temp.toString()]); temp++; } index++; } },
問(wèn)題4:在上面代碼中可以看到,在push非本月日期的時(shí)候,push進(jìn)day數(shù)組的不是字符串而是一個(gè)數(shù)組[xxx.toString],這樣就可以區(qū)分本月和非本月日期,然后在v-if里面對(duì)值進(jìn)行判斷添加class即可
<div v-for="(item, index) in days" :key='index' class="dayIndex" @click='choose(index)' :class="{choose: chooseIndex == index}"> //item為string 為本月日期 <div v-if="typeof(item) == 'string'"> {{item}} </div> //否則為非本月日期 添加class setGrey <div v-else class="setGrey"> {{item[0]}} </div> </div>
以上是“使用Vue實(shí)現(xiàn)日歷小插件的示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱:使用Vue實(shí)現(xiàn)日歷小插件的示例
網(wǎng)頁(yè)URL:http://bm7419.com/article22/igoijc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、App開發(fā)、小程序開發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)