uniapp 日历组件

<template>
	<view class="relative">
		<view class="date">
			<view class="title flexcol">
				<view v-for="item, index in title" class="title-item flexcenter borbox">
					{{item}}
				</view>
			</view>
			<view class="content flexcol relative">
				<view class="con-item borbox" v-for="item0, index0 in contentData" :key="index0" :class="index0 == btn_index ? 'active' : ''" @tap="DateBtn(index0)">
					<view class="con-item-date" :style="item0.style">{{item0 == 0 ? '' : item0.name}}</view>
				</view>
				<view class="last left absolute" @tap="Mounth('last')">
					<image src="/static/detail/left.png" mode=""></image>
				</view>
				<view class="last right absolute" @tap="Mounth('next')">
					<image src="/static/detail/right.png" mode=""></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {arrLen} from '@/utils/back.js'
	export default {
		data() {
			return {
				now: '',
				title: ['週日', '週一', '週二', '週三', '週四', '週五', '週六'],
				content: [],
				date_obj: {
					m: 0,
					d: 0,
					y: 0,
					w: 0
				},
				btn_index: -1
			}
		},
		computed: {
			contentData() {
				let count = new Date(this.date_obj.y, this.date_obj.m, 0).getDate() + this.date_obj.w;
				let lastcount = 0;
				if (this.date_obj.m != 12) {
					lastcount = new Date(this.date_obj.y, this.date_obj.m-1, 0).getDate();
				} else {
					lastcount = new Date(this.date_obj.y+1, 1, 0).getDate();
				}
				if (count>35) {
					this.content = arrLen(42);
				} else {
					this.content = arrLen(35);
				}
				let arr = this.content;
				let j = 1;
				for (let i = this.date_obj.w; i < count; i++) {
					if (j == 1) {
						arr[i] = {name: '1/' + this.date_obj.m}
					} else {
						arr[i] = {'name': j};
					}
					j++;
				}
				for (let last = 0; last < this.date_obj.w; last++) {
					arr[last] = {'name': lastcount - last, 'style': 'color: #bababa'};
				}
				let next_count = count > 35 ? 42-count : 35-count;
				let next_i = count;
				for (let next = 0; next < next_count; next ++) {
					if (next == 0) {
						arr[next_i] = {name: '1/' + (Number(this.date_obj.m) + 1), 'style': 'color: #bababa'}
					} else {
						arr[next_i] = {'name': next + 1, 'style': 'color: #bababa'}
					}
					next_i ++;
				}
				return arr;
			}
		},
		mounted() {
			let day = new Date()
			this.date_obj.d = day.getDate();
			this.date_obj.m =  day.getMonth() + 1;
			this.date_obj.y = day.getFullYear();
			this.date_obj.w = new Date(new Date().setFullYear(this.date_obj.y,this.date_obj.m-1,1)).getDay();
		},
		methods: {
			Mounth(i) {
				if (i == 'last') {
					this.date_obj.m --;
					this.date_obj.w = new Date(new Date().setFullYear(this.date_obj.y,this.date_obj.m-1,1)).getDay();
				} else {
					this.date_obj.m ++;
					this.date_obj.w = new Date(new Date().setFullYear(this.date_obj.y,this.date_obj.m-1,1)).getDay();
				}
			},
			DateBtn(i) {
				this.btn_index = i;
			}
		}
	}
</script>

<style scoped>
	.title {
		width: 701rpx;
		height: 56rpx;
		background-color: #B2B2B2;
		color: #FFFFFF;
		font-size: 29rpx;
	}
	.title-item {
		width: 101rpx;
		height: 100%;
		border-right: 1rpx solid #707070;
	}
	.title-item:last-child {
		border: none;
	}
	.content {
		width: 707rpx;
		flex-wrap: wrap;
		font-weight: bold;
	}
	.con-item {
		width: 101rpx;
		height: 130rpx;
		color: #707070;
		font-size: 25rpx;
		background-color: #FFFFFF;
		border-right: 1rpx solid #707070;
		border-bottom: 1rpx solid #707070;
	}
	.con-item:nth-child(7n) {
		border-right: none;
	}
	.con-item-date {
		margin-top: 7rpx;
		margin-left: 15rpx;
	}
	.active {
		border: 4rpx solid #415779;
	}
	.last {
		width: 49rpx;
		height: 98rpx;
		line-height: 98rpx;
	}
	.left {
		top: 50%;
		left: 0;
		margin-top: -69rpx;
	}
	.right {
		top: 50%;
		right: 6rpx;
		margin-top: -69rpx;
	}
</style>

内部自定义能力强