表单字段组件类型

支持的组件类型列表

项目支持 30+ 种 动态表单字段组件，通过 component_props.tag 属性指定。

文本输入类

1. input - 单行文本输入

• 组件: TextField
• 用途: 短文本输入，如姓名、标题等
• 特殊功能: 微信扫一扫（is_camera_scan）

2. textarea - 多行文本输入

• 组件: TextareaField
• 用途: 长文本输入，如备注、描述等
• 特性: 自动高度（autosize）

3. number - 数字输入

• 组件: NumberField
• 用途: 数字类型输入，如年龄、数量等

选择类

4. radio - 单项选择

• 组件: RadioField
• 用途: 单选选项，如性别、是否等
• 数据结构: options 数组
• 特殊功能:
  • 选项颜色（color, background_color）
  • 补充信息输入（is_input）
  • 描述信息（desc_text, desc_url）

5. checkbox - 多项选择

• 组件: CheckboxField
• 用途: 多选选项，如爱好、标签等
• 数据结构: options 数组
• 排列方向: direction (vertical/horizontal)

6. select - 单列选择器

• 组件: PickerField
• 用途: 下拉单选
• 数据结构: options 数组
• 返回值: 选中的 value

日期时间类

7. date - 日期选择器

• 组件: DatePickerField
• 用途: 选择日期

8. time - 时间选择器

• 组件: TimePickerField
• 用途: 选择时间

9. datetime - 日期时间选择器

• 组件: DateTimePickerField
• 用途: 选择日期和时间

10. calendar - 日历选择器

• 组件: CalendarField
• 用途: 日历形式选择日期

上传类

11. image_uploader - 图片上传

• 组件: ImageUploaderField
• 用途: 上传图片到七牛云
• 配置:
  • max_count: 最大数量
  • max_size: 最大文件大小（MB）
• 返回值: [{ url, name }]

12. file_uploader - 文件上传

• 组件: FileUploaderField
• 用途: 上传普通文件

特殊输入类

13. phone - 手机号输入

• 组件: PhoneField
• 用途: 手机号码输入和验证
• 验证: 11位手机号格式

14. email - 邮箱输入

• 组件: EmailField
• 用途: 邮箱地址输入和验证

15. id_card - 身份证输入

• 组件: IdentityField
• 用途: 身份证号码输入和验证

16. name - 姓名输入

• 组件: NameField
• 用途: 中文姓名输入

17. gender - 性别选择

• 组件: GenderField
• 用途: 性别选择（男/女）

位置类

18. address - 地址选择器

• 组件: AreaPickerField
• 用途: 省/市/区三级联动选择
• 数据: 使用 @vant/area-data

展示类

19. desc - 文字描述

• 组件: DesField
• 用途: 纯文字展示，不支持输入

20. divider - 分割线

• 组件: DividerField
• 用途: 视觉分割线

21. note - 富文本控件

• 组件: NoteField
• 用途: 富文本内容展示

22. marquee - 跑马灯

• 组件: MarqueeField
• 用途: 滚动公告文字

特殊功能类

23. sign - 电子签名

• 组件: SignField
• 用途: 手写签名板
• 依赖: vue-esign

24. rate - 评分选择器

• 组件: RatePickerField
• 用途: 星级评分

25. appointment - 预约控件

• 组件: AppointmentField
• 用途: 时间段预约选择
• 数据结构: 复杂的日期+时间段结构

26. rule - 活动规则控件

• 组件: RuleField
• 用途: 显示规则说明，支持弹窗

27. multi_rule - 活动规则控件（多选）

• 组件: MultiRuleField
• 用途: 多选规则选项

28. contact - 联系人控件

• 组件: ContactField
• 用途: 联系人信息输入

29. button - 按钮控件

• 组件: ButtonField
• 用途: 自定义按钮

30. custom - 自定义控件

• 组件: CustomField
• 用途: 完全自定义的组件

高级类

31. group - 组集合输入控件

• 组件: GroupField
• 用途: 将多个字段分组显示
• 配置: field_groups 数组

32. org_picker - 树形选择控件

• 组件: OrgPickerField
• 用途: 组织架构树形选择

33. volunteer_group - 义工组别选择

• 组件: VolunteerGroupField
• 用途: 义工组别单选

34. table_editor - 表格编辑控件

• 组件: TableField
• 用途: 动态表格编辑，支持增删行

35. video - 视频控件

• 组件: VideoField
• 状态: 已注释，暂未使用

组件注册位置

所有组件在 src/hooks/useComponentType.js 中注册：

export function createComponentType(data) {
  _.each(data, (item, index) => {
    // 统一名称
    item.name = item.key

    // 根据 tag 分配组件
    if (item.component_props.tag === 'input') {
      item.component = TextField;
    }
    if (item.component_props.tag === 'radio') {
      item.component = RadioField;
    }
    // ... 更多组件
  })
}

新增组件流程

1. 在 src/components/ 下创建组件目录
2. 创建 index.vue 组件文件
3. 在 src/hooks/useComponentType.js 添加 if 判断分支
4. 组件必须支持以下 props：
   • item: Object (包含 component_props 和 value)
   • 必须通过 emit 发送 "active" 事件