第vue實(shí)現(xiàn)簽到日歷效果本文實(shí)例為大家分享了vue實(shí)現(xiàn)簽到日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

先看看我們的效果圖：

一、頁面部分：

template

div

div

divv-if="!sign"@click="Sign"

i/i

div去簽到/div

/div

divv-if="sign"

i/i

div已簽到/div

/div

div已連續(xù)簽到{{day}}天，繼續(xù)加油!/div

/div

div

!--年份月份--

ul

!--點(diǎn)擊會(huì)觸發(fā)pickpre函數(shù)，重新刷新當(dāng)前日期--

li@click="pickPre(currentYear,currentMonth)"van-iconname="arrow-left"/上個(gè)月/li

li

span{{currentYear}}-{{currentMonth}}/span

/li

li@click="pickNext(currentYear,currentMonth)"下個(gè)月van-iconname="arrow"http://li

/ul

!--星期--

ul

li日/li

li一/li

li二/li

li三/li

li四/li

li五/li

li六/li

/ul

!--日期--

ul

li

v-for="dayindays"

!--本月已簽到日期--

spanv-if="day.isSignday.day.getMonth()+1===currentMonth"

imgsrc="/static/images/calendar-sign-icon.png"

{{day.day.getDate()}}

/span

!--本月未簽到日期--

spanv-if="!day.isSignday.day.getMonth()+1===currentMonth"{{day.day.getDate()}}/span

/li

/ul

/div

div

div簽到規(guī)則/div

divv-html="rolerole:'暫無內(nèi)容'"/div

/div

/div

/template

script

importindexfrom'./index';

exportdefaultindex;

/script

stylelang="less"scoped

@import'./index';

/style

二、js部分：

import{Cell,CellGroup,Field,Popup,Button,Icon}from'vant';

exportdefault{

components:{

[C]:Cell,

[CellG]:CellGroup,

[F]:Field,

[P]:Popup,

[B]:Button,

[I]:Icon

data(){

return{

currentDay:1,//當(dāng)前天

currentMonth:1,//當(dāng)前月

currentYear:1970,

currentWeek:1,//一號(hào)所在的星期

days:[],//當(dāng)月所有天數(shù)

content:{},

arrDate:[],//當(dāng)月簽到日期

num:0,

day:10,

sign:false,

role:'p每天簽到可獲得5個(gè)能量/p'

};

created(){

this.getSign();

methods:{

/**

*獲取簽到日期

*/

getSign(){

//接口未完成，模擬數(shù)據(jù)

constsign_days=[

{day:5},{day:1},{day:2},{day:3},{day:4},{day:6},{day:7},{day:8},{day:9},{day:10}

];

for(constiinsign_days){

this.arrDate.push(sign_days[i].day);

}

this.initData(null);

},

initData(cur){

letdate;

if(cur){//切換日期

date=newDate(cur);

}else{

varnow=newDate();

vard=newDate(this.formatDate(now.getFullYear(),now.getMonth()+1,1));

d.setDate(35);//設(shè)置天數(shù)為35天

date=newDate(this.formatDate(d.getFullYear(),d.getMonth(),1));

}

this.currentDay=date.getDate();//今日日期幾號(hào)

this.currentYear=date.getFullYear();//當(dāng)前年份

this.currentMonth=date.getMonth()+1;//當(dāng)前月份

this.currentWeek=date.getDay();//0,1...6星期

conststr=this.formatDate(this.currentYear,this.currentMonth,this.currentDay);//2025-01-01

this.days.length=0;//初始化日期

//如果今天是周日，放在第一行第7個(gè)位置，前面6個(gè)這里默認(rèn)顯示一周，如果需要顯示一個(gè)月，則第二個(gè)循環(huán)為i=35-this.currentWeek

for(vari=this.currentWeek;ii--){

constd=newDate(str);

d.setDate(d.getDate()-i);

vardayobject={};//用一個(gè)對(duì)象包裝Date對(duì)象

以便為以后預(yù)定功能添加屬性

dayobject.day=d;

this.days.push(dayobject);//將日期放入data中的days數(shù)組供頁面渲染使用

}

//其他周//設(shè)置天數(shù)為35天,周日設(shè)置在第一位，循環(huán)從36開始

this.num=0;

for(varj=0;j=36-this.currentWeek;j++){

constd=newDate(str);

d.setDate(d.getDate()+j);

constdddd=d.getDate();

if(dddd===1){

this.num++;

}

if(this.num===2){

return;

}

constdayobject={day:d,isSign:this.isVerDate(dddd)};

this.days.push(dayobject);

}

},

/**

*判斷該日期是否有簽到

*@paramv

*@returns{boolean}

*/

isVerDate(v){

returnthis.arrDate.includes(v);

},

/**

*上一月

*@paramyear

*@parammonth

*/

pickPre(year,month){

constd=newDate(this.formatDate(year,month,1));

d.setDate(0);

this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,1));

},

/**

*下一月

*@paramyear

*@parammonth

*/

pickNext(year,month){

constd=newDate(this.formatDate(year,month,1));

d.setDate(35);

this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,1));

},

//返回類似2025-01-01格式的字符串

formatDate(year,month,day){

month10(month='0'+month);

day10(day='0'+day);

constdata=year+'-'+month+'-'+day;

returndata;

},

/**

*點(diǎn)擊簽到

*@paramindex

*/

Sign(){

constnow=newDate();

this.arrDate.push(now.getDate());

this.initData();

this.sign=true;

//接口待完成，虛擬提示

this.$fn.success('簽到成功');

}

};

三、CSS部分：

.test{

.top{

background:url('/static/images/user-bg-img.jpg')no-repeat00;

background-size:100%100%;

overflow:hidden;

color:#ffffff;

padding:15px;

height:120px;

text-align:center;

.button{

display:flex;

justify-content:center;

border:1pxsolid#ffffff;

border-radius:20px;

color:#ffffff;

font-size:18px;

width:120px;

margin:0auto10px;

height:40px;

line-height:40px;

.calendar-icon{

display:block;

width:40px;

height:40px;

background:url(/static/images/calendar-icon.png)no-repeat-6px-4px;

background-size:114px45px;

}

}

.button:active{

background-color:#5283c4;

opacity:0.8;

}

.content{

margin:015px;

border-radius:8px;

overflow:hidden;

margin-top:-40px;

box-shadow:rgba(225,225,225,0.7)0

10px20px0;

.month{

background:#ffffff;

margin:0;

padding:10px15px;

display:flex;

justify-content:space-between;

li{

text-transform:uppercase;

letter-spacing:0;

}

.arrow{

color:#5283c4;

font-size:12px;

i{

font-size:13px;

top:2px;

}

}

.year-month{font-size:17px;}

.weekdays{/*頭部星期*/

margin:0;

padding:10px0;

background-color:#ffffff;

display:flex;

flex-wrap:wrap;

justify-content:space-around;

li{

display:inline-block;

text-align:center;

}

.days{/*日期*/

padding:0010px;

background:#FFFFFF;

margin:0;

display:flex;

flex-wrap:wrap;

align-items:center;