vue 日期面板_vue实现最简单的日历板

最近遇到的一个项目需要实现日历板的功能，前期技术准备的时候随手写了一个简版日历板，样式几乎没有，功能也只有月份的切换，这里随手一发，后续会在这个基础上拓展复杂功能。

实现效果：

代码部分

-----------------------------------------------------------------------------------------------------------------------------------

上月

  {{year}}年{{month}}月  

下月

{{list}}

{{list.date}}

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

dateList.push({

date:preYear+'-'+preMonth+'-'+(that.getDaysLength(preYear,preMonth)+(i-firstDay+1)),

type:'prev'

})

}else if(i

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()

}

}

.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;

}

}

}

}

----------------------------------------------------------------------------------------------------------------------------

这个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;

}

以上