最近遇到的一个项目需要实现日历板的功能，前期技术准备的时候随手写了一个简版日历板，样式几乎没有，功能也只有月份的切换，这里随手一发，后续会在这个基础上拓展复杂功能。
实现效果：
-----------------------------------------------------------------------------------------------------------------------------------
<template>
<div class="hello">
<div class="flexd center">
<button @click="monthChange(1)">上月</button>
<span> {{ year }}年{{ month }}月 </span>
<button @click="monthChange(2)">下月</button>
</div>
<div class="bord shadow">
<div class="topTh flexd">
<div
class="sons Th bigblack f18 flexd_center border"
v-for="list in weeks"
:key="list"
>
{{ list }}
</div>
</div>
<div class="daysBox flexd wrap">
<div
class="sons cubes"
:class="`${list.type} kkk`"
v-for="(list, index) in dateList"
:key="'a_' + index"
>
<div class="dateBox">
<div class="dateText">
{{ list.date }}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
date: new Date().getDate(),
dateList: [],
};
},
methods: {
monthChange(e) {
if (e == 1) {
this.month--;
if (this.month == 0) {
this.month = 12;
this.year--;
}
} else {
this.month++;
if (this.month == 13) {
this.month = 1;
this.year++;
}
}
this.getDateList();
},
getDateList() {
this.dateList = [];
let month = this.month,
year = this.year,
firstDay = this.getFirstDay(year, month),
daysLength = this.getDaysLength(year, month),
dateList = this.dateList,
that = this;
let preMonth = month - 1,
preYear = year,
nextMonth = month + 1,
nextYear = year;
if (preMonth == 0) {
preMonth = 12;
preYear--;
}
if (nextMonth == 13) {
nextMonth = 1;
nextYear++;
}
for (var i = 0; i < 42; i++) {
if (i < firstDay) {
dateList.push({
date:
preYear +
"-" +
preMonth +
"-" +
(that.getDaysLength(preYear, preMonth) + (i - firstDay + 1)),
type: "prev",
});
} else if (i < firstDay + daysLength) {
dateList.push({
date: year + "-" + month + "-" + (i - firstDay + 1),
type: "now",
});
} else {
dateList.push({
date:
nextYear +
"-" +
nextMonth +
"-" +
(i - (firstDay + daysLength) + 1),
type: "next",
});
}
}
},
getFirstDay(year, month) {
//获取当月第一天是周几
let that = this;
return new Date(year + "-" + month + "-1").getDay();
},
getDaysLength(year, month) {
//获取某月天数
var d = new Date(year, month, 0);
return d.getDate();
},
},
created() {
this.getDateList();
},
};
</script>
<style scoped lang="scss" >
.hello {
padding: 1rem;
.bord {
border: 2px solid gray;
width: 100%;
height: max-content;
.daysBox {
.cubes {
height: 9rem;
border: 1px solid gainsboro;
&.prev,
&.next {
background: rgba(0, 0, 0, 0.05);
cursor: not-allowed;
}
.dateBox {
width: 100%;
height: 100%;
}
}
}
.topTh {
border-bottom: 2px solid gray;
}
.sons {
width: calc(100% / 7);
&.Th {
height: 35px;
border: 1px solid ghostwhite;
background: lightgrey;
}
}
}
}
</style>
----------------------------------------------------------------------------------------------------------------------------
这个vue文件就可以实现全部功能，另外项目引用了全局css文件，以下是部分样式
.flexd{
display: flex;
}
.flexd_center{
display: flex;
align-items: center;
justify-content: center;
}
.center{
text-align: center;
justify-content: center;
}
.f18{
font-size: 18px;
}
.wrap{
flex-wrap: wrap;
}
以上
