---恢復(fù)內(nèi)容開始---

1.日歷組件

1.分析功能：日歷基本功能，點(diǎn)擊事件改變?nèi)掌?#xff0c;樣式的改變

1.結(jié)構(gòu)分析：html

1.分為上下兩個(gè)部分

2.上面分為左按鈕，中間內(nèi)容展示，右按鈕

下面分為周幾展示和日期展示

3.基本結(jié)構(gòu)頁面html書寫

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

margin: 0px;

border: 0px;

list-style: none;

}

.calender2{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

height:380px;

width:420px;

border: 1px solid #ccc;

}

.date-header{

margin-left: 10px;

height: 40px;

width: 350px;

line-height: 40px;

text-align: center;

}

.pre-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent rgb(35, 137, 206) transparent transparent;

}

.next-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent transparent transparent ?rgb(35, 137, 206);

}

.show-date{

margin-left: 40px;

margin-top: 0px;

display: inline-block;

line-height: 40px;

text-align: center;

width: 310px;

color: rgb(35, 137, 206);

}

.week-header{

background: rgb(35, 137, 206);

color: #fff;

font-size: 14px;

text-align: center;

line-height: 20px;

}

.week-header div{

margin: 0;

padding: 0;

display: inline-block;

height: 20px;

width: 60px;

}

.every-day{

display: inline-block;

height: 50px;

width: 60px;

text-align: center;

line-height: 50px;

}

.other-day{

color: #ccc;

}

.now-day{

background: rgb(35, 137, 206);

}

.active-day{

/* padding: 2px */

/* border-sizing:content-box; */

border: 2px solid rgb(35, 137, 206);

}

4.一些事件以及邏輯

1.使得當(dāng)前的日期為今天的日期

{{ year }}年{{ month }}月{{ day }}日

data(){

return{

year:null,

month:null,

day:null

}

},

created(){

this.getInitDate();

},

methods:{

getInitDate(){

const date = new Date();

this.year = date.getFullYear();

this.month = date.getUTCMonth() + 1;

this.day = date.getDate();

}

}

2.設(shè)置該月日期起始值(找到一號(hào)是在哪里)

beginDay(){

return new Date(this.year, this.mounth - 1, 1).getDay();

}

3.當(dāng)月天數(shù)字體正常顯示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

?

4.當(dāng)月天數(shù)之前的部分變灰，外加正常顯示日期

注意幾個(gè)數(shù)學(xué)問題：

1.當(dāng)前月天數(shù)日期

2.上月剩余天數(shù)

3.此月顯示的下月天數(shù)

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

5.能知道當(dāng)前日期，能點(diǎn)擊其他日期，并且會(huì)有相應(yīng)的變化

知道當(dāng)前日期：

this.curDate = `${this.year}-${this.month}-${this.day}`

判斷今天是不是當(dāng)前日期，并且給一個(gè)樣式：

'now-day':`${year}-${month}-${item - beginDays}` == curDate

當(dāng)點(diǎn)擊當(dāng)月有的日期的時(shí)候會(huì)根據(jù)你的點(diǎn)擊顯示的日期發(fā)生變化

判斷是點(diǎn)擊的那一天：

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

點(diǎn)擊這一天，綁定點(diǎn)擊事件

@click="handleClickDay(item - beginDay)"

handleClickDay(day){

this.day = day

}

6.前后兩個(gè)按鈕的功能

handlePrev(){

if(this.month == 1){

this.month = 12

this.year--

}else{

this.month--

}

},

handleNext(){

if(this.month == 12){

this.month = 1

this.year++

}else{

this.month++

}

}

7.判斷點(diǎn)擊的是否為當(dāng)月的最后一天

computedDay(){

const allDay = new Date(this.year, this.month, 0).getDate();

if(this.day > allDay){

this.day = allDay;

}

}

將這個(gè)函數(shù)分別在handlePrev(),handleNext()里面執(zhí)行-------注意是this.computedDay();

完成

---恢復(fù)內(nèi)容結(jié)束---

1.日歷組件

1.分析功能：日歷基本功能，點(diǎn)擊事件改變?nèi)掌?#xff0c;樣式的改變

1.結(jié)構(gòu)分析：html

1.分為上下兩個(gè)部分

2.上面分為左按鈕，中間內(nèi)容展示，右按鈕

下面分為周幾展示和日期展示

3.基本結(jié)構(gòu)頁面html書寫

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

margin: 0px;

border: 0px;

list-style: none;

}

.calender2{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

height:380px;

width:420px;

border: 1px solid #ccc;

}

.date-header{

margin-left: 10px;

height: 40px;

width: 350px;

line-height: 40px;

text-align: center;

}

.pre-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent rgb(35, 137, 206) transparent transparent;

}

.next-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent transparent transparent ?rgb(35, 137, 206);

}

.show-date{

margin-left: 40px;

margin-top: 0px;

display: inline-block;

line-height: 40px;

text-align: center;

width: 310px;

color: rgb(35, 137, 206);

}

.week-header{

background: rgb(35, 137, 206);

color: #fff;

font-size: 14px;

text-align: center;

line-height: 20px;

}

.week-header div{

margin: 0;

padding: 0;

display: inline-block;

height: 20px;

width: 60px;

}

.every-day{

display: inline-block;

height: 50px;

width: 60px;

text-align: center;

line-height: 50px;

}

.other-day{

color: #ccc;

}

.now-day{

background: rgb(35, 137, 206);

}

.active-day{

/* padding: 2px */

/* border-sizing:content-box; */

border: 2px solid rgb(35, 137, 206);

}

4.一些事件以及邏輯

1.使得當(dāng)前的日期為今天的日期

{{ year }}年{{ month }}月{{ day }}日

data(){

return{

year:null,

month:null,

day:null

}

},

created(){

this.getInitDate();

},

methods:{

getInitDate(){

const date = new Date();

this.year = date.getFullYear();

this.month = date.getUTCMonth() + 1;

this.day = date.getDate();

}

}

2.設(shè)置該月日期起始值(找到一號(hào)是在哪里)

beginDay(){

return new Date(this.year, this.mounth - 1, 1).getDay();

}

3.當(dāng)月天數(shù)字體正常顯示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

?

4.當(dāng)月天數(shù)之前的部分變灰，外加正常顯示日期

注意幾個(gè)數(shù)學(xué)問題：

1.當(dāng)前月天數(shù)日期

2.上月剩余天數(shù)

3.此月顯示的下月天數(shù)

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

5.能知道當(dāng)前日期，能點(diǎn)擊其他日期，并且會(huì)有相應(yīng)的變化

知道當(dāng)前日期：

this.curDate = `${this.year}-${this.month}-${this.day}`

判斷今天是不是當(dāng)前日期，并且給一個(gè)樣式：

'now-day':`${year}-${month}-${item - beginDays}` == curDate

當(dāng)點(diǎn)擊當(dāng)月有的日期的時(shí)候會(huì)根據(jù)你的點(diǎn)擊顯示的日期發(fā)生變化

判斷是點(diǎn)擊的那一天：

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

點(diǎn)擊這一天，綁定點(diǎn)擊事件

@click="handleClickDay(item - beginDay)"

handleClickDay(day){

this.day = day

}

6.前后兩個(gè)按鈕的功能

handlePrev(){

if(this.month == 1){

this.month = 12

this.year--

}else{

this.month--

}

},

handleNext(){

if(this.month == 12){

this.month = 1

this.year++

}else{

this.month++

}

}

7.判斷點(diǎn)擊的是否為當(dāng)月的最后一天

computedDay(){

const allDay = new Date(this.year, this.month, 0).getDate();

if(this.day > allDay){

this.day = allDay;

}

}

將這個(gè)函數(shù)分別在handlePrev(),handleNext()里面執(zhí)行-------注意是this.computedDay();

完成

總結(jié)

以上是生活随笔為你收集整理的java月历组件_vue之手把手教你写日历组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。