更新记录

1.0.0（2024-12-10） 下载此版本

更新日志

v1.0.0 (2024-12-09)

• 初始发布：
  • 集成 uni-calendar 组件，支持日期选择功能。
  • 添加了 时间段设置 功能，用户可以为每个日期设置多个时间段（包括开始时间和结束时间）。
  • 提供了 放号数量输入 功能，允许用户为每个时间段设置放号数量。
  • 提供 删除时间段 功能，用户可以删除已设置的时间段。
  • 时间段管理抽屉：通过抽屉界面，用户可以选择和管理时间段，并保存更改。
  • 支持日期选择后自动加载对应日期的时间段数据。
  • 支持 只读模式，在只读模式下禁用所有编辑功能。
  • 数据通过 v-model 双向绑定，确保父组件可以获取和更新时间段设置。
  • 默认展示当前日期，用户选择日期后，时间段列表会自动更新。
  • 优化了 UI 样式，提升了用户体验。

平台兼容性

hucaofeng-calendar-set 插件使用说明

📖 插件简介

该插件提供日期选择和时间段管理功能，支持为特定日期设置多个时间段及对应的放号数量，适用于日程管理、预约系统等场景。

🛠 使用步骤

🥇 1. 引入插件

在组件中引入插件及其依赖组件：

import HucaofengCalendarSet from "@/components/hucaofeng-calendar-set/hucaofeng-calendar-set.vue";

🥈 2. 在父组件中注册

export default {
  components: {
    HucaofengCalendarSet
  },
  data() {
    return {
      scheduleData: {}, // 放号数据
      timeSlotsArr: [   // 可选时间段列表
        { value: '08:00 - 09:00' },
        { value: '09:00 - 10:00' },
        { value: '10:00 - 11:00' }
      ]
    };
  },
  methods: {
    updateSchedule(newData) {
      console.log('更新后的放号数据:', newData);
      this.scheduleData = newData;
    }
  }
};

🥉 3. 在模板中使用

<hucaofeng-calendar-set
  :value="scheduleData"
  :readonly="false"
  :timeSlotsArr="timeSlotsArr"
  @update="updateSchedule"
/>

📋 属性说明

🎉 事件说明

🌟 功能特点

1. 日期切换：支持通过日历组件选择日期，并根据日期动态展示时间段。
2. 时间段管理：可选择预定义的时间段并动态更新时间段列表。
3. 数量设置：每个时间段可设置对应的放号数量。
4. 实时更新：组件内数据与父组件数据实时同步。
5. 只读模式：通过设置 readonly 属性可禁用所有编辑功能，适用于展示场景。

🎨 样式自定义

组件内部样式支持通过类名自定义，以下是主要样式类名的作用说明：

提示：根据项目需求，您可以覆盖这些类名的样式来定制外观。

🚨 注意事项

1. timeSlotsArr 的格式要求： 必须为数组，数组的每一项为对象，格式如：{ value: '08:00 - 10:00' }。 确保时间段值格式正确，组件会直接使用这些值进行展示和操作。

2. 只读模式： 当 readonly 属性设置为 true 时，组件的所有编辑功能（如管理时间段、删除时间段）将被禁用。

3. 父组件通信： value 属性必须是对象格式，键为日期（如 2024-12-10），值为时间段数组，确保格式正确。

4. 样式覆盖： 样式覆盖可通过局部样式或全局样式实现。避免直接修改组件内部样式代码。

🙋‍♀️ 如有问题请在评论区留言，谢谢！

“代码无忧，开发无惧！” 如果在使用中遇到任何问题，或者有任何改进建议，请随时在评论区留言，我们非常乐意与您沟通交流！ 🎈