本文实例为大家分享了vue实现打卡功能的具体代码，供大家参考，具体内容如下
记录使用vue实现移动端日历打卡样式
template
compareToNow：与当前时间比较
-1：小于当前时间
0：今天
1：大于当前时间
<!-- @click="todo" 实现打卡功能 -->
<div v-if="compareToNow(item) === 1" @click="todo">{{ item.date }}</div>
<!-- @click="todo" 实现补卡功能 -->
<div v-if="compareToNow(item) === -1" @click="todo" class="otherDay">
<template>
<div>
<div class="top-title">
<div><span @click="lastMonth" class="link">⋘</span></div>
<div><span>{{year}}年{{month}}月</span></div>
<div><span @click="nextMonth" class="link">⋙</span></div>
</div>
<div class="container" style="border-bottom: 1px solid #cccccc">
<div v-for="(item,index) in weeks" :key="index">{{ item }}</div>
</div>
<div class="container" style="padding: 1vh 1vh 3vh 1vh;">
<div v-for="(item,index) in data" :key="index">
<div v-if="compareToNow(item) === 0" style="color: #2d8cf0">{{ item.date }}</div>
<div v-if="compareToNow(item) === 1">{{ item.date }}</div>
<div v-if="compareToNow(item) === -1" class="otherDay">
<div>{{ item.date }}</div>
<div class="date-desc">补卡</div>
</div>
</div>
</div>
</div>
</template>
script
<script>
export default {
data() {
return {
today:new Date(),
now:new Date(),
weeks:["日","一","二","三","四","五","六"],
year:"",
month:"",
date:"",
firstDay:"",
data:[],
};
},
mounted() {
this.getNow();
},
methods:{
getNow(){
this.year = this.now.getFullYear();
this.month = this.now.getMonth() + 1;
this.date = this.now.getDate();
this.now.setDate(1);
this.firstDay = this.now.getDay();
this.initData();
},
getMonthDay(month){
if ([1,3,5,7,8,10,12].includes(month)) {
return 31
} else if ([4,6,9,11].includes(month)) {
return 30
} else if (month === 2) {
// 判断当年是否为闰年
if (
(this.year % 4 === 0 && this.year % 100 !== 0) ||
this.year % 400 === 0
) {
return 29
} else {
return 28
}
}
},
initData(){
this.data = [];
let days = this.getMonthDay(this.month);
for (let i = 0; i < this.firstDay; i++) {
this.data.push({
year:"",
month:"",
date:"",
});
}
for (let i = 0; i < days; i++) {
this.data.push(
{
year: this.year,
month: this.month,
date: i + 1,
}
);
}
},
lastMonth(){
this.now.setMonth(this.now.getMonth() - 1);
this.getNow();
},
nextMonth(){
this.now.setMonth(this.now.getMonth() + 1);
this.getNow();
},
compareToNow(item){
if (item.year && item.month && item.date) {
let date1 = new Date();
date1.setFullYear(item.year)
date1.setMonth(item.month - 1)
date1.setDate(item.date)
date1.setHours(0)
date1.setMinutes(0)
date1.setSeconds(0)
let now = new Date();
now.setHours(0)
now.setMinutes(0)
now.setSeconds(0)
if (date1.getTime() > now.getTime()){
return 1
}else if (date1.getTime() === now.getTime()){
return 0
}else if (date1.getTime() < now.getTime()){
return -1
}
}
}
}
}
</script>
style
/* 背景图片 background:url 和 background-size 可注释 */
<style scoped lang="less">
.top-title{
display: grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:40px;
grid-gap:1rem;
background-color: #FFFFFF;
border-bottom: 1px solid #cccccc;
line-height: 40px;
}
.container{
display: grid;
grid-template-columns:repeat(7,1fr);
grid-auto-rows:40px;
grid-gap:1rem;
background-color: #FFFFFF;
line-height: 40px;
div{
text-align: center;
}
}
.today{
background: url("../assets/circle_success.webp") no-repeat center center;
background-size: 95% 95%;
position: relative;
}
.otherDay{
background: url("../assets/circle_error.webp") no-repeat center center;
background-size: 95% 95%;
position: relative;
}
.link{
font-size: 14px;
color: #2d8cf0;
}
.date-desc{
display: block;
position: absolute;
top: 6.8vw;
left: 1.5vw;
font-size: 2.3vw;
color: green;
}
</style>
