vue手写日历，带星期

日历，带星期"/>

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 - 1this.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)}}}}