ieplus-app

IE-plus 项目

项目简介

这是一个基于 uni-app 的学习应用项目，使用 Vite 作为构建工具。

最近修改

日历组件全面升级 - 新增多项功能

修改时间: 2024年 修改内容: 为 uni-calendar 组件新增了多项实用功能，提升组件的灵活性和可定制性

新增功能

1. 周日位置控制

• 参数: sundayFirst (Boolean, 默认: false)
• 功能: 控制周日显示在第一列还是最后一列

• 用法:

  <uni-calendar :sunday-first="true" />  <!-- 周日在前 -->
  <uni-calendar :sunday-first="false" /> <!-- 周日在后 -->
  

  2. 显示模式控制

  • 参数: displayMode (String, 默认: 'month')
  • 可选值: 'month' | 'week'
  • 功能: 控制按月显示还是按周显示
  • 特点: 按周显示时，其他周的日期会显示但置灰，只有指定周正常显示
  • 方法:
  • preWeek(): 切换到上一周
  • nextWeek(): 切换到下一周
  • setWeekNumber(weekNumber): 设置指定周数
  • 事件: change-week: 周数变化时触发
  • 用法: ```vue
    

  上一周 下一周 第3周 ```

3. 今天高亮控制

• 参数: highlightToday (Boolean, 默认: true)
• 功能: 控制是否高亮今天，影响"回到今日"按钮显示和今天日期样式

• 用法:

  <uni-calendar :highlight-today="false" />  <!-- 不高亮今天 -->
  

  4. 工具栏显示控制

  • 参数: showToolbar (Boolean, 默认: true)
  • 功能: 控制是否显示顶部的月份切换工具栏
  • 用法: vue <uni-calendar :show-toolbar="false" /> <!-- 隐藏工具栏 -->

5. 自定义日期样式插槽

• 插槽: calendar-item
• 功能: 允许外部自定义每个日期项的显示样式
• 特点: 可以完全自定义整个日期项，包含更多参数

• 用法:

  <!-- 自定义整个日期项 -->
  <uni-calendar>
  <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
    <view class="enhanced-calendar-item" :class="{ 'not-current-month': !weeks.isCurrentMonth }">
      <text class="date-number">{{ weeks.date }}</text>
      <view class="date-indicators">
        <view v-if="weeks.extraInfo" class="indicator-dot"></view>
        <view v-if="weeks.isDay" class="today-badge">今</view>
        <view v-if="!weeks.isCurrentMonth" class="month-badge">非本月</view>
      </view>
    </view>
  </template>
  </uni-calendar>
  

  数据属性说明

  每个日期项（weeks）包含以下属性：

  • fullDate: 完整日期字符串 (如: "2024-01-15")
  • year: 年份
  • month: 月份
  • date: 日期数字
  • isDay: 是否为今天
  • disable: 是否禁用
  • isCurrentMonth: 是否为当前月份 (true: 本月, false: 上月/下月)
  • isWeekModeDisabled: 按周模式下的置灰标识
  • beforeMultiple: 多选开始标识
  • afterMultiple: 多选结束标识
  • multiple: 多选中间标识
  • lunar: 农历信息
  • extraInfo: 额外信息（打点数据）

  修改文件

  1. src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
  2. 新增5个props参数
  3. 添加计算属性 filteredWeeks 处理按周显示
  4. 修改模板支持条件渲染和插槽

  5. 优化星期标题显示逻辑

  6. src/uni_modules/uni-calendar/components/uni-calendar/util.js

  7. 新增 sundayFirst 参数支持

  8. 修改 _getWeek 方法支持周日位置控制

  9. 优化日期计算逻辑

  10. src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue

  11. 新增 highlightToday 参数支持

  12. 添加插槽支持自定义日期样式

  13. 优化今天高亮显示逻辑

  完整参数列表

  <uni-calendar
  :sunday-first="false"           <!-- 周日位置控制 -->
  display-mode="month"            <!-- 显示模式 -->
  :week-number="1"                <!-- 按周显示时的周数 -->
  :highlight-today="true"         <!-- 是否高亮今天 -->
  :show-toolbar="true"            <!-- 是否显示工具栏 -->
  :insert="true"                  <!-- 插入模式 -->
  :lunar="false"                  <!-- 显示农历 -->
  :range="false"                  <!-- 范围选择 -->
  :selected="[]"                  <!-- 打点信息 -->
  :start-date=""                  <!-- 开始日期 -->
  :end-date=""                    <!-- 结束日期 -->
  :show-month="true"              <!-- 显示月份背景 -->
  :clear-date="true"              <!-- 清空日期 -->
  :readonly="false"               <!-- 只读模式 -->
  >
  <template #calendar-item="{ weeks, calendar, selected, lunar, highlightToday, weekIndex, weeksIndex }">
  <!-- 自定义整个日期项 -->
  </template>
  </uni-calendar>
  

日期范围API

Calendar 工具类提供两个实用的日期范围获取方法：

1. 获取本月日期范围

import Calendar from './util.js'

const calendar = new Calendar()
const monthRange = calendar.getCurrentMonthRange('2024-10-15')
// 返回: {startDate: '2024-10-01', endDate: '2024-10-31', totalDays: 31, totalWeeks: 5}

2. 获取指定周日期范围

// 获取当前日期所在的周
const currentWeek = calendar.getCurrentWeekRange('2024-10-15')
// 返回: {startDate: '2024-10-13', endDate: '2024-10-19', totalDays: 7, currentWeek: 3, totalWeeks: 5}

// 获取指定周数
const week2 = calendar.getCurrentWeekRange('2024-10-15', 2)
// 返回: {startDate: '2024-10-06', endDate: '2024-10-12', totalDays: 7, currentWeek: 2, totalWeeks: 5}

参数说明：

• date: 日期字符串，可选，默认为当前日期
• weekNumber: 周数，从1开始，可选，不传时自动计算指定日期所在的周

返回值说明：

• startDate: 开始日期
• endDate: 结束日期
  
• totalDays: 总天数
• totalWeeks: 总周数（实际包含本月日期的周数）
• currentWeek: 当前周数（仅周范围方法）

技术细节

• 使用 Vue 3 的 Composition API 和插槽系统
• 通过计算属性实现按周显示的数据过滤
• 使用条件渲染控制工具栏和今天高亮显示
• 支持完全自定义的日期样式渲染
• 提供完整的周切换API，支持跨月份切换
• 智能处理边界情况（第一周/最后一周的跨月切换）
• 提供实用的日期范围获取API，支持外部调用

影响范围

• 所有使用 uni-calendar 组件的页面都可以使用新功能
• 向后兼容，现有代码无需修改
• 新功能为可选参数，默认行为保持不变

项目结构

src/
├── uni_modules/          # uni-app 模块
│   └── uni-calendar/     # 日历组件
├── pagesStudy/           # 学习相关页面
├── components/           # 公共组件
└── ...

开发说明

• 使用 Vue 3 + TypeScript
• 构建工具：Vite
• UI框架：uni-app
• 样式：SCSS + Tailwind CSS

注意事项

• 修改日历组件后，请确保所有使用该组件的页面都能正常显示
• 如果需要在其他项目中复用此修改，请同时复制两个文件的修改内容