廖德云
9556ecb346
# Conflicts: # pages/views/shengchan/ribaoshuju/rbsjLsxq.vue # pages/views/shengchan/ribaoshuju/trqRbsj.vue # uni_modules/cxc-szcx-dateRangeSelect/components/cxc-szcx-dateRangeSelect/cxc-szcx-dateRangeSelect.vue
162 lines
3.9 KiB
Markdown
162 lines
3.9 KiB
Markdown
|
||
### 紧凑型日期时间选择器组件说明
|
||
|
||
|
||
#### 一、组件功能
|
||
该组件是基于 UniApp 开发的紧凑型日期选择器，支持以下功能：
|
||
1. **三种选择模式**：
|
||
- 单选（single）
|
||
- 范围选择（range）
|
||
- 多选（multiple）
|
||
2. **弹出式日历选择**：
|
||
- 支持月份滑动切换
|
||
- 显示农历日期
|
||
- 支持同天范围选择
|
||
3. **数据双向绑定**：
|
||
- 通过 `modelValue` 实现父子组件数据同步
|
||
4. **自定义样式**：
|
||
- 紧凑型输入框设计
|
||
- 支持自定义主题颜色
|
||
- 响应式布局适配
|
||
|
||
|
||
#### 二、组件Props
|
||
|
||
| 参数名 | 类型 | 默认值 | 说明 |
|
||
|--------------|------------|----------|--------------------------|
|
||
| `modelValue` | Array/Date | `[null]` | 双向绑定的值（根据模式变化） |
|
||
| `mode` | String | `single` | 选择模式（single/range/multiple） |
|
||
|
||
|
||
#### 三、组件数据
|
||
|
||
| 名称 | 类型 | 说明 |
|
||
|------------|--------|--------------------------|
|
||
| `dateRange` | Array | 当前选中的日期范围（内部状态） |
|
||
|
||
|
||
#### 四、组件方法
|
||
|
||
| 方法名 | 参数 | 说明 |
|
||
|----------------|------------|--------------------------|
|
||
| `openPicker` | 无 | 打开日历选择器 |
|
||
| `calendarConfirm` | `e` | 日历确认回调（处理选中数据） |
|
||
|
||
|
||
#### 五、事件说明
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|--------------|--------------------------|----------------------|
|
||
| `update:modelValue` | 数据更新时触发 | 当前选中的日期数组 |
|
||
|
||
|
||
#### 六、样式说明
|
||
```vue
|
||
<style scoped>
|
||
.input-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.compact-input {
|
||
flex: 1;
|
||
padding: 6px 8px;
|
||
font-size: 16px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
width: 120px;
|
||
}
|
||
|
||
.compact-input.active {
|
||
border-color: #409eff;
|
||
background-color: #f5f7ff;
|
||
}
|
||
</style>
|
||
```
|
||
|
||
**关键样式点**：
|
||
1. 输入框宽度固定为 120px
|
||
2. 紧凑型设计（height: 20px）
|
||
3. 活动状态样式增强
|
||
4. 水平排列布局
|
||
|
||
|
||
#### 七、使用示例
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<!-- 单选模式 -->
|
||
<compact-datetime-picker
|
||
v-model="singleDate"
|
||
mode="single"
|
||
/>
|
||
|
||
<!-- 范围选择模式 -->
|
||
<compact-datetime-picker
|
||
v-model="rangeDate"
|
||
mode="range"
|
||
/>
|
||
|
||
<!-- 多选模式 -->
|
||
<compact-datetime-picker
|
||
v-model="multipleDate"
|
||
mode="multiple"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
singleDate: null,
|
||
rangeDate: [null, null],
|
||
multipleDate: []
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
|
||
|
||
#### 八、注意事项
|
||
1. **日期格式要求**：
|
||
- 单选模式：`YYYY-MM-DD` 字符串格式
|
||
- 范围模式：`[startDate, endDate]` 数组格式
|
||
- 多选模式：`[date1, date2, ...]` 数组格式
|
||
2. **依赖组件**：
|
||
- 需安装 `wu-calendar` 组件（第三方库）
|
||
3. **异常处理**：
|
||
```javascript
|
||
calendarConfirm(e) {
|
||
this.dateRange = [];
|
||
try {
|
||
this.dateRange.push(formatDate(new Date(e.range.before)));
|
||
this.dateRange.push(formatDate(new Date(e.range.after)));
|
||
} catch (error) {
|
||
return; // 异常处理
|
||
}
|
||
this.$emit('update:modelValue', this.dateRange);
|
||
}
|
||
```
|
||
4. **性能优化**：
|
||
- 建议使用 `:range-end-repick="true"` 开启范围重新选择
|
||
- 通过 `:item-height="45"` 控制日历行高
|
||
|
||
|
||
#### 九、扩展功能建议
|
||
1. 添加时间选择功能
|
||
2. 支持自定义日期禁用范围
|
||
3. 增加国际化支持
|
||
4. 添加动画过渡效果
|
||
5. 支持预设常用日期范围
|
||
|
||
如果需要进一步定制化，可以修改以下部分：
|
||
1. 日历组件配置（`wu-calendar` 参数）
|
||
2. 日期格式化函数（`formatDate`）
|
||
3. 输入框样式和交互逻辑
|
||
4. 异常处理机制 |