vue写日历

心血来潮 想要用vue自己个一个日历，于是就写着玩玩了，（注：蓝色块表示当前日期，红点表示未签到，蓝点表示已签到，由于我注释了查询签到日的代码所以看到的都是红点）

先来看看效果吧

实现界面基本布局html代码如下：

<template>
	<div>
		<mt-header fixed title="签到记录">
			<mt-button slot="left" icon="back" @click="back"></mt-button>
		</mt-header>
		<div class="content">
			<div class="calendar">
				<div  class='calendar-header'>
					<i class='icon icon-left' @click="prevMonth"></i>
					<p>{{year}}年{{month}}月</p>
					<i class='icon icon-right' @click="nextMonth"></i>
				</div>
				<table class='calendar-body'>
					<tr v-for="data in aMonth">
						<td v-for="d in data" class="sign"><span>{{d}}</span></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

实现页面布局的css代码如下：

.content
		position:absolute
		width:100%
		top:1.5rem
		bottom:0
		padding:0.4rem 0
		background:#f2f2f2
		.calendar
			width:100%
			background:#bcd5f8
			text-align:center
			line-height:1rem
			color:#333
			padding:0.6rem
			.calendar-header
				width:100%
				height:1rem
				line-height:1rem
				padding:0 0.8rem
				font-size:0.56rem
				font-weight:700
				white-space:nowrap
				display:flex
				justify-content:space-between
				i
					display:block
					width:1rem
					height:1rem
					line-height:1rem
				p
					font-size:0.56rem
			.calendar-body
				width:100%
				font-size:0.5rem
				tr:first-child
					font-size:0.3rem
					color:#8392a8
				tr
					white-space:nowrap
					display:flex
					justify-content:space-between
					margin-top:0.15rem
					td
						display:block
						width:1.5rem
					.isToday
						font-size:0.6rem
						color:#fff	
						span
							display:block
							margin:0 auto
							width:0.9rem
							height:0.9rem
							border-radius:0.1rem
							background:#1574f3
							box-shadow: 0 1px 0 1px #1a42e1
					.sign
						position:relative
						span:before
							content:''
							display:block
							position:absolute
							top:-0.07rem
							left:0.66rem
							width:0.18rem
							height:0.18rem
							border-radius:50%
					.isSign
						span:before
							background:#1574f3
					.notSign
						span:before
							background:#f7110c

实现功能的js代码如下：

<script>
	import { Toast } from 'mint-ui'
	import {axiosPostATM} from "../../common/publicJs/apputil.js"
	export default{
		name:'SignRecord',
		data(){
			return{
				nowYear:'',//今年
				nowMonth:'',//本月
				nowDay:'',//今天
				aMonth:[],
				year:'',//查询年
				month:'',//查询月
		    	signList:[]
			}
		},
		created(){
			let _this=this;
			let date=new Date();
	    	_this.nowYear=_this.year=date.getFullYear();
	    	_this.nowMonth=_this.month=date.getMonth()+1;
	    	_this.nowDay=date.getDate();
			_this.bulidCal(_this.year,_this.month);//创建日历
//			_this.QueryList();//获取签到信息
		},
		methods:{
			//返回上一页
			back(){
				this.$router.go(-1);
			},
			//列表查询
			QueryList(){
				let _this=this;
				_this.drawCal();
				if(_this.year<_this.nowYear || (_this.year==_this.nowYear && _this.month<=_this.nowMonth) ){
			  		let params = {
					 	year:_this.year,
					 	month:_this.month
					};
					axiosPostATM(params,"B00008").then(function(result){
					 	_this.signList =result.list;
					 	_this.drawCal();
					}).catch(function(result){
					 	Toast({
							message:result.returnMsg,
							duration:1500
						});
					});
				}
			},
			//上一月
			prevMonth(){
				this.month--;
				if(this.month<1){
					this.month=12;
					this.year--;
				}
//				this.QueryList();
			},
			//下一月
			nextMonth(){
				this.month++;
				if(this.month>12){
					this.month=1;
					this.year++;
				}
//				this.QueryList();
			},
		    //构造日历二维数组
		    bulidCal() {
		    	let _this=this;
		      	_this.aMonth[0] = new Array(7);
		      	_this.aMonth[1] = new Array(7);
		      	_this.aMonth[2] = new Array(7);
		      	_this.aMonth[3] = new Array(7);
		      	_this.aMonth[4] = new Array(7);
		      	_this.aMonth[5] = new Array(7);
		      	_this.aMonth[6] = new Array(7);
		      	let calDate = new Date(_this.year,_this.month-1,1);//获取当月第1天
		      	let dayOfFirst = calDate.getDay();//获取当月第1天是周几
		      	let prevDate = new Date(_this.year,_this.month, 0);//获取下月的第0天
		      	let daysInMonth = prevDate.getDate();//获取当月共几天：通过获取下月的第0天，即是当月最后一天日期
		      	let iVarDate = 1;
		      	let tr, td;
		      	_this.aMonth[0][0] = 'SU';
		      	_this.aMonth[0][1] = 'MO';
		      	_this.aMonth[0][2] = 'TU';
		      	_this.aMonth[0][3] = 'WE';
		      	_this.aMonth[0][4] = 'TH';
		      	_this.aMonth[0][5] = 'FR';
		      	_this.aMonth[0][6] = 'SA';
		      	//确定当月第一天的位置
		      	for (td = dayOfFirst; td < 7; td++) {
		        	_this.aMonth[1][td]= iVarDate;
		        	iVarDate++;
		      	}
		      	//确定当月1日之后每天的位置
		      	for (tr = 2; tr < 7; tr++) {
		        	for (td = 0; td < 7; td++) {
		          		if (iVarDate <= daysInMonth) {
			            	_this.aMonth[tr][td] = iVarDate;
			            	iVarDate++;
		          		}
		        	}
		      	}
		    },
		    //是否有签到
		    isSigned(iday){
		    	let _this=this;
		      	let signed = false;
		      	$.each(_this.signList,function(index,item){
		    	  	if(item.signTime == iday) {
		    			signed = true;
		    			return false;
		    	  	}
		      	});
		      	return signed ;
		    },
		    //构造当月日历签到情况
		    drawCal() {
		    	let _this=this;
	        	$('.calendar-body>tr').each(function(tr){
        			$(this).children('td').each(function(td){
        				$(this).removeClass('isToday');
			       		$(this).removeClass('isSign');
				       	$(this).removeClass('notSign');
        				if(tr>0 && _this.aMonth[tr][td]){
        					if(_this.year<_this.nowYear || (_this.year==_this.nowYear && _this.month<=_this.nowMonth) ){
	        					if(_this.year==_this.nowYear && _this.month==_this.nowMonth && _this.aMonth[tr][td]==_this.nowDay){
					       			$(this).addClass('isToday');
					       		}else{
					       			$(this).removeClass('isToday');
					       		}
				       			if(_this.isSigned(_this.aMonth[tr][td])){
					       			$(this).addClass('isSign');
					       			$(this).removeClass('notSign');
					       		}else{
					       			$(this).removeClass('isSign');
					       			$(this).addClass('notSign');
					       			if(_this.year==_this.nowYear && _this.month==_this.nowMonth && _this.aMonth[tr][td]>_this.nowDay){
					       				$(this).removeClass('isSign');
						       			$(this).removeClass('notSign');
						       		}
					       		}
					       	}
        				}
			       })
			    })
		    }
		},
		watch:{
			month(){
				this.bulidCal();
				this.drawCal();
			}
		}
	}
</script>

好啦 一个简单的日历就完成了，是不是很简单呢