vue手写日历，带星期

html

			<view class="SW_mask" v-if="SWShow">
				<view class="SW_mask_title">
					{{year}}年 {{month}}月
				</view>
				<view class="SW_mask_cont">
					<view class="SW_mask_cont_week">
						<view class="SW_mask_cont_week_items" v-for="(items,index) in WeeksList" :key='index'>
							{{items}}
						</view>
					</view>
					<view class="SW_mask_cont_day">
						<view class="SW_mask_cont_day_items" v-for="(items,index) in lastDayPush" :key='index'>
						  	  
						</view>
						<view :class="CloseSWIndex== index?'SW_mask_cont_day_itemsAct':'SW_mask_cont_day_items' " v-for="(items,index) in lastDay" :key='index' @click.stop="CloseSWIndex = index">
						  	<div> {{items + 1}}</div> 
						</view>
					</view>
				</view>
			</view>

css

		//  mask
		.SW_mask {
			width: 100%;
			height: 580rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #3E4E72;
			border-radius: 40rpx 40rpx 0px 0px;
			z-index: 9999;

			.SW_mask_title {
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #4D6087;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}

			.SW_mask_cont {
				width: 100%;
				height: 410rpx;

				.SW_mask_cont_week {
					width: 100%;
					height: 86rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 50rpx;
					box-sizing: border-box;

					.SW_mask_cont_week_items {
						color: #8691A7;
						font-size: 26rpx;
					}
				}

				.SW_mask_cont_day {
					width: 100%;
					height: auto;
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;
					padding: 0 10rpx;
					box-sizing: border-box;
					margin-top: 5rpx;
					.SW_mask_cont_day_items {
						font-size: 24rpx;
						color: #fff;
						width: 14.2%;
						text-align: center;
						height: 75rpx;
						display: flex;
						justify-content: center;
						div{
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
						}
					}
					.SW_mask_cont_day_itemsAct {
						font-size: 24rpx;
						color: #fff;
						width: 14.2%;
						text-align: center;
						height: 75rpx;
						display: flex;
						justify-content: center;
						div{
							width: 50rpx;
							height: 50rpx;
							line-height: 50rpx;
							background: #547BE4;
							border-radius: 50%;
							text-align: center;
						}
					}
				}
			}
		}

js

	export default {
		data() {
			return {
				year: '',
				month: '',
				lastDay: 0,
				WeeksList: ['日', '一', '二', '三', '四', '五', '六'],
				SWShow: true,
				lastDayPush:[],
				CloseSWIndex:0
			}
		},
	 
 
		initMenu() {

		},
		created() {
			var date = new Date()
			var day = date.getDate()
			this.CloseSWIndex = day - 1
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			this.lastDay = new Date(this.year, this.month, 0).getDate() //获得是标准时间,需要getDate()获得天数
			this.lastDay = Number(this.lastDay)
			var weekStart= new Date(date.setDate(1))
			//当前月第一天星期几:
			var weekday = weekStart.getDay();
			if(weekday == 7){
				return
			}else {
				for(var i=0;i< weekday;i++ ){
					 this.lastDayPush.push(1)
				}
			}

		}
	}