最近遇到的一个项目需要实现日历板的功能，前期技术准备的时候随手写了一个简版日历板，样式几乎没有，功能也只有月份的切换，这里随手一发，后续会在这个基础上拓展复杂功能。
实现效果：
代码部分
-----------------------------------------------------------------------------------------------------------------------------------
<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',
computed:{
daysRule(){
}
},
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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.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,.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;
}
以上
网友评论