初始化工程
This commit is contained in:
61
README.md
61
README.md
@@ -116,26 +116,6 @@ src/
|
|||||||
- 💾 **数据持久化** - 自动保存用户输入
|
- 💾 **数据持久化** - 自动保存用户输入
|
||||||
- 🔄 **状态同步** - 全局状态实时更新
|
- 🔄 **状态同步** - 全局状态实时更新
|
||||||
|
|
||||||
## 核心功能实现
|
|
||||||
|
|
||||||
### 动态表单配置 ⭐
|
|
||||||
- **JSON驱动** - 通过配置文件定义表单结构
|
|
||||||
- **字段类型丰富** - 支持10+种字段类型(图片上传、文本输入、多选、计数器、滑动条等)
|
|
||||||
- **灵活配置** - 支持验证规则、默认值、选项配置
|
|
||||||
- **自动渲染** - 根据配置自动生成对应的UI组件
|
|
||||||
- **类型安全** - 完整的TypeScript类型定义
|
|
||||||
|
|
||||||
### 支持的字段类型
|
|
||||||
- `image-upload` - 图片上传
|
|
||||||
- `text-input` - 文本输入
|
|
||||||
- `number-input` - 数字输入
|
|
||||||
- `time-display` - 时间显示
|
|
||||||
- `venue-input` - 场地输入(带箭头)
|
|
||||||
- `multi-select` - 多选按钮
|
|
||||||
- `counter` - 计数器(min/max)
|
|
||||||
- `slider` - 滑动条
|
|
||||||
- `radio-group` - 单选按钮组
|
|
||||||
- `checkbox` - 复选框
|
|
||||||
|
|
||||||
### 图片上传
|
### 图片上传
|
||||||
- 使用Taro.chooseImage API
|
- 使用Taro.chooseImage API
|
||||||
@@ -156,47 +136,6 @@ src/
|
|||||||
|
|
||||||
## 如何自定义表单配置
|
## 如何自定义表单配置
|
||||||
|
|
||||||
### 修改表单字段
|
|
||||||
|
|
||||||
编辑 `src/config/formConfig.ts` 文件:
|
|
||||||
|
|
||||||
```typescript
|
|
||||||
// 添加新字段
|
|
||||||
{
|
|
||||||
key: 'newField', // 字段唯一标识
|
|
||||||
type: 'text-input', // 字段类型
|
|
||||||
title: '新字段', // 显示标题
|
|
||||||
required: true, // 是否必填
|
|
||||||
placeholder: '请输入内容', // 占位符
|
|
||||||
defaultValue: '', // 默认值
|
|
||||||
validation: { // 验证规则
|
|
||||||
min: 1,
|
|
||||||
max: 100,
|
|
||||||
message: '请输入1-100字符'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修改现有字段
|
|
||||||
{
|
|
||||||
key: 'playStyle',
|
|
||||||
type: 'multi-select',
|
|
||||||
title: '活动玩法',
|
|
||||||
options: [
|
|
||||||
{ label: '新玩法', value: 'new-style' }, // 添加新选项
|
|
||||||
{ label: '单打', value: '单打' },
|
|
||||||
// ... 其他选项
|
|
||||||
]
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 支持的配置选项
|
|
||||||
|
|
||||||
- **基础配置**: `key`, `type`, `title`, `required`, `placeholder`, `hint`
|
|
||||||
- **默认值**: `defaultValue`
|
|
||||||
- **验证规则**: `validation.min`, `validation.max`, `validation.message`
|
|
||||||
- **选项配置**: `options` (用于选择类型字段)
|
|
||||||
- **特殊配置**: `config.maxImages`, `config.minValue`, `config.showArrow` 等
|
|
||||||
|
|
||||||
## 开发者说明
|
## 开发者说明
|
||||||
|
|
||||||
本项目采用最简单有效、优雅的方式实现,避免代码冗余,遵循以下原则:
|
本项目采用最简单有效、优雅的方式实现,避免代码冗余,遵循以下原则:
|
||||||
|
|||||||
Reference in New Issue
Block a user