uniDataCenter/components/month-calend...

<template>
	<view class="mask" @touchmove.stop.prevent="moveStop" @click="clearMask">
		<view class="mask-container" @click.stop="moveStop">
			<view class="operation2">
				<view class="month-opertaion">
					<view class="iconfont icon-a-xiangyou_iconcopy" @click="yearChange('reduce')"></view>
					<view class="monthText">{{year}}年</view>
					<view class="iconfont icon-xiangyou_icon" @click="yearChange('add')"></view>
				</view>
			</view>
			<view class="monthBox">
				<view :class="['monthItem',monthInfo.year==year&&month==item.value?'active':'']" v-for="(item,index) in monthList" :key="index+'monthList'" @click="monthEvent(index)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"month-calendar",
		props:['monthInfo'],
		data() {
			return {
				monthList:[
					{name:'一月',value:'01'},
					{name:'二月',value:'02'},
					{name:'三月',value:'03'},
					{name:'四月',value:'04'},
					{name:'五月',value:'05'},
					{name:'六月',value:'06'},
					{name:'七月',value:'07'},
					{name:'八月',value:'08'},
					{name:'九月',value:'09'},
					{name:'十月',value:'10'},
					{name:'十一月',value:'11'},
					{name:'十二月',value:'12'},
				],
				year:this.monthInfo.year,
				month:this.monthInfo.month,
			};
		},
		methods:{
			monthEvent(index){
				this.month = this.monthList[index].value
				this.$emit('changeMonth',{year:this.year,month:this.month})
			},
			yearChange(type){
				if(type=='add'){
					this.year += 1;
				}else{
					this.year -= 1;
				}
			},
			clearMask(){
				this.$emit('clearMask')
			},
			moveStop(){},
		}
	}
</script>

<style scoped lang="scss">
	.mask{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		.mask-container{
			width: 100%;
			height: 450rpx;
			background: #FFFFFF;
			position: absolute;
			left: 0;
			bottom: 0;
			.operation2{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
				.month-opertaion{
					display: flex;
					align-items: center;
					.monthText{
						text-align: center;
						width: 200rpx;
						font-size: 28rpx;
						color: #333;
					}
					.iconfont{
						color: #808080;
						font-size: 28rpx;
					}
				}
			}
			.monthBox{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				padding-top: 30rpx;
				.monthItem{
					width: 25%;
					text-align: center;
					height: 100rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #333333;
					&.active{
						color: #007AFF;
					}
				}
			}
		}
	}
</style>