更新记录

1.0.0（2025-08-02） 下载此版本

v1.0.0

平台兼容性

uni-app(4.07)

uni-app x(4.07)

Water Calendar 组件使用说明

组件概述

Water Calendar 是一个功能完善的日历组件，专为展示每日数据（如饮水量、步数等）设计。支持月份切换、日期选择、极值标记等功能，并提供了友好的交互提示。

功能特性

• 📅 月份切换（支持限制范围）
• 🔍 日期选择与数据展示
• 🏆 自动标记每月数据的最大值和最小值
• ⏳ 今天日期特殊标记
• 💡 超出范围操作提示

• 🎨 可自定义样式

  Props 说明

  参数名	类型	默认值	说明
  waterData	Array	[]	必需，数据数组，格式为 { date: 'YYYY-MM-DD', value: Number }
  startYear	Number	2020	日历起始年份
  startMonth	Number	0	日历起始月份（0-11）

  组件使用

  
  <template>
      <view style="padding: 50px;">
          <WaterCalendar :water-data="waterData" :start-year="2020" :start-month="0" @day-selected="handleDaySelect"
              @month-changed="handleMonthChange" />
      </view>
  </template>
  
  <script>
      import WaterCalendar from "@/components/ax-WaterCalendar/ax-WaterCalendar.vue"
      export default {
          components: {
              WaterCalendar
          },
          data() {
              return {
                  waterData: [{
                          date: '2025-08-01',
                          value: 7.57
                      },
                      {
                          date: '2025-07-01',
                          value: 7.57
                      },
                      {
                          date: '2025-07-02',
                          value: 6.53
                      },
                      {
                          date: '2025-07-03',
                          value: 52.89
                      },
                      {
                          date: '2025-07-04',
                          value: 42.89
                      },
                      {
                          date: '2025-07-05',
                          value: 32.89
                      },
                      {
                          date: '2025-07-06',
                          value: 20.89
                      },
                      {
                          date: '2025-07-07',
                          value: 112.89
                      },
                      {
                          date: '2025-07-08',
                          value: 102.89
                      }
                  ],
              }
          },
          onLoad() {},
          created() {
  
          },
          methods: {
              handleDaySelect(day) {
                  console.log('选中日期:', day);
              },
              handleMonthChange(month) {
                  console.log('月份变更:', month);
                  // 这里可以加载新月份的数据
              },
          }
      }
  </script>
  
  <style scoped>
  
  </style>