wardrobe/tm-vuetify/components/tm-monthCalendar/tm-monthCalendar.vue

<template>
	<view class="tm-monthCalendar " :class="[inline?'d-inline-block':'d-block']">
		<view  @click.stop.prevent="showpop=!showpop"><slot></slot></view>
		<tm-poup :black="black_tmeme"  @change="toogle" ref="pop" v-model="showpop" height="900" >
			
			<view class="tm-monthCalendar-wk">
				<view class="shadow-10">
					<view class="tm-monthCalendar-title ">
						<view class="text-size-g text-align-left pl-32 py-32" :class="[color_tmeme,black_tmeme?'bk':'']">
							<view class="text-size-g text-white" style="font-size: 42upx;">{{ selectedDay?selectedDay.year:'' }}年</view>
							<view class="text-size-lg text-white" style="font-size: 72upx;">
								{{ selectedDay?selectedDay.month:'' }}
								<text class="text-size-g pl-10">月</text>
							</view>
						</view>
						<view class="tm-monthCalendar-close"><tm-icons @click="$refs.pop.close()" name="icon-times" :color="'white'"></tm-icons></view>
					</view>
					<view class="flex-between pa-24 " style="width: 50%;margin: auto;">
						<view><tm-icons @click="preYear" name="icon-angle-left" color="grey-lighten-1"></tm-icons></view>
						<view class="text-size-g text-weight-b">{{ titleVale }}</view>
						<view><tm-icons @click="nextYear" name="icon-angle-right" color="grey-lighten-1"></tm-icons></view>
					</view>
				</view>
			</view>

			<view class="tm-monthCalendar-body">
				<view class="tm-monthCalendar-bg flex-center">
					<text class="text" :class="[black_tmeme ? ' opacity-5 ' : '']">{{ selectedDay?selectedDay.year:'' }}</text>
				</view>
				<view class="tm-monthCalendar-content">
					<view style="height: 32upx;"></view>
					<tm-row>
						<tm-col
							@click="day_danxuanclick(item, index)"
							
							align="center"
							grid="3"
							v-for="(item, index) in nowData"
							:key="index"
							:round="6"
						>
							<view class="tm-monthCalendar-col flex-center flex-col round-6" :class="[item.checked === true ? color_tmeme : '']">
								<text class="text-size-g" :class="[item.checked ? 'text-white' : '']">{{ item.text }}</text>
							</view>
						</tm-col>
					</tm-row>
				</view>

				<view class="pa-32">
					<tm-button @click="confirm" block itemeClass="round-24" :theme="btnColor ? btnColor : color_tmeme" fontSize="32">{{ btnText }}</tm-button>
				</view>
			</view>
		</tm-poup>
	</view>
</template>

<script>
/**
 * 月份日历
 * @description 日历组件，提供节气、农历公历显示，时间范围选择等功能。
 * @property {Function} confirm = [] 当选择日期确认后触发，如果未选择确认后不会触发事件。
 * @property {String} btn-text = [] 底部按钮确认的文字
 * @property {Boolean} inline = [] 默认true,是否内联或者块状block,内联有助于单行内想快速显示操作多个日历。非内联，适合独占一行。
 * @property {String} btn-color = [primary|green|orange|red|blue|bg-gradient-blue-lighten] 默认：bg-gradient-blue-lighten底部按钮确认的背景颜色仅支持主题色名称
 * @property {String} color = [primary|green|orange|red|blue] 主题默认:primary，提供是请写主题色名称
 * @property {String} default-value = [] 默认时间默认:当前时间，格式：'2021-7-21'
 * @property {Boolean|String} disabled = [true|false] 是否禁用，只读，默认false
 * @property {Boolean|String} black = [true|false] 是否开启暗黑模式
 */

	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmCol from "@/tm-vuetify/components/tm-col/tm-col.vue"
	import tmRow from "@/tm-vuetify/components/tm-row/tm-row.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmPoup from "@/tm-vuetify/components/tm-poup/tm-poup.vue"
	export default {
		components:{tmIcons,tmCol,tmRow,tmButton,tmPoup},
	name: 'tm-monthCalendar',
	props: {
		black: {
			type: Boolean | String,
			default: null
		},
		disabled: {
			type: Boolean | String,
			default: false
		},
		// 默认年月2020-7
		defaultValue: {
			type: String,
			default: ''
		},

		// 底部按钮文件
		btnText: {
			type: String,
			default: '确认'
		},
		// 底部按钮背景主题色名称
		btnColor: {
			type: String,
			default: ''
		},
		// 主题色。
		color: {
			type: String,
			default: 'primary'
		},

		value: {
			type: Boolean,
			default: false
		},
		// 跟随主题色的改变而改变。
		fllowTheme:{
			type:Boolean|String,
			default:true
		},
		inline:{
			type:Boolean|String,
			default:true
		}

	},
	model: {
		prop: 'value',
		event: 'input'
	},
	computed:{
		black_tmeme: function() {
			if (this.black !== null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		},
		color_tmeme:function(){
			if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
	},
	watch: {
		value:function(val){
			this.showpop = val;
		},


		defaultValue: function(val) {
			let d = new Date().toLocaleDateString();
			
			if (this.defaultValue) {
				d = this.defaultValue.replace(/-/g,'/');
			}
			this.selectedDay = null;
			this.cal = new Date(d);
			this.titleVale = this.cal.getFullYear() + '年';
			this.getData();
		}
	},
	data() {
		return {
			showpop:false,
			nowData: [], //当前月份数据。
			cal: null, //日历对象数据。
			selectedDay: null,
			titleVale: '',
			dataValue:null,
		};
	},
	mounted() {
		let d = new Date().toLocaleDateString();
		if (this.defaultValue) {
			d = this.defaultValue.replace(/-/g,'/');
			this.dataValue = this.defaultValue;
		}
		
		this.cal = new Date(d);
		this.titleVale = this.cal.getFullYear() + '年';
		this.getData();
		this.showpop = this.value;
	},
	methods: {
		// 取当前年份的月数据。
		getData() {
			let text = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
			let year = this.cal.getFullYear();
			let month = this.cal.getMonth();
			this.nowData = [];
			for (let i = 0; i < 12; i++) {
				let checked = false;
				if (this.selectedDay) {
					checked = this.selectedDay.year == year && this.selectedDay.index == i ? true : false;
				} else {
					checked = month == i ? true : false;
				}
				let obj = {
					month: i + 1,
					text: text[i],
					index: i,
					year: year,
					checked: checked
				};
				this.nowData.push(obj);
				if (checked) {
					this.selectedDay = obj;
				}
			}
		},
		
		confirm() {
			this.$emit('confirm', this.selectedDay);
			this.$refs.pop.close();
		},
		close(){
			this.$refs.pop.close();
		},
		toogle(e){
			let t = this;
			if(e){
				this.$nextTick(function(){
					if(this.dataValue != this.defaultValue){
						this.dataValue = this.defaultValue.replace(/-/g,'/');
					}
				})
			}
			this.$emit('input',e);
			this.$emit('update:value',e);
		},


		preYear() {
			if (!this.cal) return;
			this.cal.setFullYear(this.cal.getFullYear() - 1);
			this.titleVale = this.cal.getFullYear() + '年';
			this.getData();
		},
		nextYear() {
			if (!this.cal) return;
			this.cal.setFullYear(this.cal.getFullYear() + 1);
			this.titleVale = this.cal.getFullYear() + '年';
			this.getData();
		},
		day_danxuanclick(item, index) {
			if (this.disabled) {
				this.$tm.toast('不可选择');
				return;
			}
			let d = { ...item };
			this.selectedDay = item;
			this.getData();
		}
	}
};
</script>

<style lang="scss" scoped>
.tm-monthCalendar-col {
	width: 100%;
	height: 120upx;
	// text-align: center;
	// line-height: 80upx;
	line-height: 0;
	position: relative;
	.text {
		position: absolute;
		bottom: 14upx;
	}
}
.textOn {
	color: #1976d2 !important;
}
.tm-monthCalendar-wk {
	width: 100%;
	.tm-monthCalendar-title {
		position: relative;

		.tm-monthCalendar-close {
			position: absolute;
			top: 32upx;
			right: 32upx;
		}
	}
}
.tm-monthCalendar-body {
	position: relative;

	.tm-monthCalendar-bg {
		height: 400upx;

		.text {
			font-size: 200upx;
			color: rgba(225, 225, 225, 0.4);
		}
	}

	.tm-monthCalendar-content {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
</style>