vue实现签到日历效果

第vue实现签到日历效果本文实例为大家分享了vue实现签到日历效果的具体代码，供大家参考，具体内容如下

先看看我们的效果图：

一、页面部分：

template

div

div

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

i/i

div去签到/div

/div

divv-if="sign"

i/i

div已签到/div

/div

div已连续签到{{day}}天，继续加油!/div

/div

div

!--年份月份--

ul

!--点击会触发pickpre函数，重新刷新当前日期--

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

li

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

/li

li@click="pickNext(currentYear,currentMonth)"下个月van-iconname="arrow"//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签到规则/div

divv-html="rolerole:'暂无内容'"/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,//当前天

currentMonth:1,//当前月

currentYear:1970,

currentWeek:1,//一号所在的星期

days:[],//当月所有天数

content:{},

arrDate:[],//当月签到日期

num:0,

day:10,

sign:false,

role:'p每天签到可获得5个能量/p'

};

created(){

this.getSign();

methods:{

/**

*获取签到日期

*/

getSign(){

//接口未完成，模拟数据

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);//设置天数为35天

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

}

this.currentDay=date.getDate();//今日日期几号

this.currentYear=date.getFullYear();//当前年份

this.currentMonth=date.getMonth()+1;//当前月份

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

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

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

//如果今天是周日，放在第一行第7个位置，前面6个这里默认显示一周，如果需要显示一个月，则第二个循环为i=35-this.currentWeek

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

constd=newDate(str);

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

vardayobject={};//用一个对象包装Date对象

以便为以后预定功能添加属性

dayobject.day=d;

this.days.push(dayobject);//将日期放入data中的days数组供页面渲染使用

}

//其他周//设置天数为35天,周日设置在第一位，循环从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;

},

/**

*点击签到

*@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;