增加获取场馆、字典
This commit is contained in:
67
src/components/DateTimePicker/README.md
Normal file
67
src/components/DateTimePicker/README.md
Normal 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. 组件会自动处理边界情况
|
||||
Reference in New Issue
Block a user