增加获取场馆、字典

This commit is contained in:
筱野
2025-08-24 16:04:31 +08:00
parent c6f4f11259
commit bb6ec8c183
29 changed files with 1217 additions and 414 deletions

View File

@@ -0,0 +1,67 @@
# DateTimePicker 年月选择器
一个基于 NutUI 的年月切换弹窗组件,支持自定义年份范围和默认值。
## 功能特性
- 🎯 年月分别选择,操作简单直观
- 🎨 遵循设计稿样式,美观易用
- 📱 支持移动端手势操作
- ⚙️ 可自定义年份范围
- <20><> 基于 NutUI 组件库,稳定可靠
## 使用方法
```tsx
import { DateTimePicker } from '@/components'
const MyComponent = () => {
const [visible, setVisible] = useState(false)
const handleConfirm = (year: number, month: number) => {
console.log('选择的年月:', year, month)
setVisible(false)
}
return (
<DateTimePicker
visible={visible}
onClose={() => setVisible(false)}
onConfirm={handleConfirm}
defaultYear={2025}
defaultMonth={11}
minYear={2020}
maxYear={2030}
/>
)
}
```
## API 参数
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| visible | boolean | - | 是否显示弹窗 |
| onClose | () => void | - | 关闭弹窗的回调 |
| onConfirm | (year: number, month: number) => void | - | 确认选择的回调 |
| defaultYear | number | 当前年份 | 默认选中的年份 |
| defaultMonth | number | 当前月份 | 默认选中的月份 |
| minYear | number | 2020 | 可选择的最小年份 |
| maxYear | number | 2030 | 可选择的最大年份 |
## 样式定制
组件使用 CSS Modules可以通过修改 `index.module.scss` 文件来自定义样式。
主要样式类:
- `.date-time-picker-popup` - 弹窗容器
- `.picker-columns` - 选择器列容器
- `.picker-column` - 单列选择器
- `.action-buttons` - 操作按钮区域
## 注意事项
1. 组件基于 NutUI 的 Picker 和 Popup 组件
2. 年份范围建议不要设置过大,以免影响性能
3. 月份固定为 1-12 月
4. 组件会自动处理边界情况