Calendar

用于日历展示，支持自定义日历显示(例如签到场景)；支持多选

基本使用

    <!-- 基础单选 -->
    <com-calendar></com-calendar>

    <!-- 多选 -->
    <com-calendar multiple :limit="3"></com-calendar>

自定义单元格内容

<template>
    <com-calendar @change="handleChange">
        <template v-slot="{ data: date }">
            <view class="my-date" v-if="date" v-show="date.isCurrentMonth" :class="[
                date.isSelected ? 'active-date': '',
                date.isDisabled ? 'disabled-date': ''
            ]">
                {{ date.day }}
                <view class="sign-tag" v-if="sign.includes(`${date.year}-${date.month}-${date.day}`)"></view>
            </view>
        </template>
    </com-calendar>
</template>

<script>
    export default {
		data() {
			return {
				sign: [new Date().toLocaleDateString(), '2022-01-28'], //已签到日期
			}
		},
		
		methods: {
			
			handleChange(e){
				console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
.my-date{
	box-sizing: border-box;
	width: 100rpx;
	height: 100rpx;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	
	.sign-tag{
		position: absolute;
		bottom: 5rpx;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		font-size: 20rpx;
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: orange;
	}
	
	&.active-date{
		background-color: var(--primary-color);
		color: white;
		border-radius: 8rpx;
	}
	
	&.disabled-date{
		color: #ccc;
	}
}

</style>

API

Props

属性名	说明	类型	必填	默认值
value	日期值	String / Number / Object / Date	false	-
multiple	是否多选	Boolean	false	false
limit	最多选择个数	String / Number	false	-1
showChineseDate	是否显示农历	Boolean	false	false
disabled	是否禁用选择	Boolean	false	false

Events

事件	说明	回调参数
change	改变日期时触发	选择的日期对象数组,例如: [{year: "2023", month: "1", day: "30"}]
overlimit	超出选择个数时触发	选择的日期对象数组,例如: [{year: "2023", month: "1", day: "30"}]