更新记录

0.0.4（2024-01-28）

feat:新增方法返回当前年月

0.0.3（2024-01-26）

feat: 新增是否显示头部信息 新增handleChange事件

0.0.2（2024-01-26）

feat：解决选中日期和重要节日日期的背景色，文字颜色冲突

平台兼容性

日历组件

简单介绍

• 组件需要依赖 tailwindcss ，请自行在项目适配；
• 本组件依赖 uni-app 内置组件swiper组件
• nvue 页面中的swiper组件部分功能不支持，详情见uni-app 内置组件：swiper
• 通过 uni_modules 引用组件，在页面 template 中即可直接使用，无需在页面中 import 和注册 components；
• 可设置显示收缩按钮，收缩后只显示一个星期的日期，展开后显示一个月的日期；可以通过触摸屏幕左右滑动切换月份或切换年；
• 本组件农历转换使用的 js 是 @1900-2100 区间内的公历、农历互转
• 若有插件导入失败，重启编辑器；

API

属性说明

注意：

1. 农历日期、节日、标记日期，只会显示其一，优先级 : 标记 > 节日 > 农历日期；

事件说明

1. 方法使用：在组件上添加 @handleCurrent="handleClick" 事件，事件名可自行定义
   
2. 方法使用：在组件上添加 @handleChange="handleChange" 事件，事件名可自行定义
   
3. 方法使用：在组件上添加 @currentDay="handleCurrent" 事件，事件名可自行定义
   

@handleCurrent 返回值 e 说明

基本用法

在template中使用组件

<template>
  <AtomCalendar @handleCurrent="handleClick" />
</template>

在script中使用

<script setup lang="ts">
import AtomCalendar from "@/components/atom-calendar.vue";
const handleClick = (e: any) => {
  console.log(e, "接收参数");
};
</script>