实现一个日期组件，如图：
components.js代码如下：
Vue.component('sc-calendar',{
template:'<div class="scCalendar">' +
'<div class="calendar_header">' +
'<div class="prev" @click="prevMonth"> < </div>' +
'<span class="text_year">{{currentYear}}年</span>' +
'<span class="text_month">{{currentMonth}}月</span>' +
'<div class="next" @click="nextMonth"> > </div>' +
'</div>' +
'<div class="calendar_content">' +
'<ul class="week">' +
'<li v-for="item in weeks">{{item}}</li>' +
'</ul>' +
'<ul class="day">' +
'<li v-for="item in dayList" :class="{marginRight0:item.marginRight0}">{{item.text}}</li>' +
'</ul>' +
'</div>' +
'</div>',
data:function(){
return {
weeks: ['日', '一', '二', '三', '四', '五', '六'],
dayList:[],
currentYear:'',
currentMonth: ''
}
},
created:function(){
var date=new Date;
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth()+1;
this.calDay(this.currentYear, this.currentMonth);
},
methods:{
//计算指定月份的天数
calDay:function(year,month){
var oDate = new Date();
//setFullYear(year,month,day) 方法用于设置年份,返回调整过的日期的毫秒表示。
oDate.setFullYear(year, month-1,1);
oDate.setDate(1);//设置一个月中的第一天
var oNow = oDate.getDay();//当前月的第一天是星期几
var dayNum = 0; //指定月份的天数
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
dayNum = 31;
}else if(month==4 || month==6 || month==9 || month==11){
dayNum = 30;
}else if(month==2&&this.isLeaYear(year)){
dayNum = 29;
}else{
dayNum = 28;
}
var SumDayLiNum = 0;//总共的格子数
var lastNum = (dayNum-(7-oNow))%7; //最后剩余的数
lastNum = lastNum == 0?0:7;
SumDayLiNum = 7 + parseInt((dayNum-(7-oNow))/7)*7+lastNum;
this.showDayList(dayNum,SumDayLiNum,oNow);
},
//判断是否是闰年
isLeaYear:function(year){
if(year%4==0&&year%100!=0){
return true;
