uniapp 日历设置、时间段设置、放号设置、预约放号设置
📖 插件简介
该插件提供日期选择和时间段管理功能，支持为特定日期设置多个时间段及对应的放号数量，适用于日程管理、预约系统等场景。
插件地址：日历设置、时间段设置、放号设置、预约设置
📖 效果图如下
🛠 使用步骤
🥇 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"
/>
📋 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | Object | {} | 放号数据对象，键为日期，值为时间段数组 |
readonly | Boolean | false | 是否为只读模式，true 时禁用编辑功能 |
timeSlotsArr | Array | [] | 时间段选项列表，格式为 [{value: '开始时间 - 结束时间'}] |
🎉 事件说明
| 事件名 | 参数 | 说明 |
|---|---|---|
update | scheduleData: Object | 时间段数据发生变化时触发，参数为最新数据 |
🌟 功能特点
- 日期切换：支持通过日历组件选择日期，并根据日期动态展示时间段。
- 时间段管理：可选择预定义的时间段并动态更新时间段列表。
- 数量设置：每个时间段可设置对应的放号数量。
- 实时更新：组件内数据与父组件数据实时同步。
- 只读模式：通过设置
readonly属性可禁用所有编辑功能，适用于展示场景。
🎨 样式自定义
组件内部样式支持通过类名自定义，以下是主要样式类名的作用说明：
| 类名 | 作用 |
|---|---|
container | 外层容器样式 |
calendar | 日历组件样式 |
time-settings | 时间段设置区域样式 |
time-settings-header | 时间段设置区域头部样式 |
time-info | 单个时间段显示的样式 |
selected-date | 当前选中日期的文本样式 |
add-button | 添加或保存按钮的样式 |
time-slot | 单个时间段外层容器样式 |
delete-button | 删除按钮的样式 |
drawer-content | 抽屉内容区域的样式 |
drawer-footer | 抽屉底部区域的样式 |
提示：根据项目需求，您可以覆盖这些类名的样式来定制外观。
插件地址：日历设置、时间段设置、放号设置、预约设置
🚨 注意事项
-
timeSlotsArr的格式要求：
必须为数组，数组的每一项为对象，格式如：{ value: '08:00 - 10:00' }。
确保时间段值格式正确，组件会直接使用这些值进行展示和操作。 -
只读模式：
当readonly属性设置为true时，组件的所有编辑功能（如管理时间段、删除时间段）将被禁用。 -
父组件通信：
value属性必须是对象格式，键为日期（如2024-12-10），值为时间段数组，确保格式正确。 -
样式覆盖：
样式覆盖可通过局部样式或全局样式实现。避免直接修改组件内部样式代码。
🙋♀️ 如有问题请在评论区留言，谢谢！
“代码无忧，开发无惧！”
如果在使用中遇到任何问题，或者有任何改进建议，请随时在评论区留言，我们非常乐意与您沟通交流！ 🎈