使用场景：

各种数据的采集与对应展示

样式与交互逻辑：

  1. 打开弹窗，当前页面打开，弹窗标题标识当前操作意图
  2. 跳转页面，页面顶部会有面包屑或者返回按钮
  3. 弹窗总的规则：
    1. 标题：添加xxx，编辑xxx，查看xxx
    2. 表单项：label右对齐，字数控制8个以内，输入框宽度占满右侧，一行保持一个项目（项目特别多时可能一行两项，此时可考虑是否页面内表单更合适），输入项的提示默认”请输入”，下拉选择提示默认”请选择”
    3. 按钮：取消（关闭弹窗，清空输入数据），提交（执行对应弹窗操作，成功后给出操作提示语，并关闭弹窗，执行后续操作，如刷新列表）
    4. 查看时，遮罩层可点击关闭，右上角有关闭按钮；新建/编辑时，遮罩层取消关闭功能，右上角关闭按钮和右下角按钮都可关闭。关闭的弹窗需要清空弹窗数据，包括验证信息。
  4. 考虑右侧弹窗方式的应用场景？

demo展示：

表单项列举展示：

文本/数值输入

image.png

文本域（默认3行，最高6行）

image.png

下拉单选框（注意与单选的交集场景）

image.pngimage.png

下拉多选框（注意与多选的交集场景）

image.png
image.png

级联选择

image.pngimage.png

单选

适用场景：有默认选项，通常5个项目内且必选其一时，非必选或者大于5个项目时改为下拉选择

多选

适用场景：可枚举数量不超过5个时的多选选择，其它情况考虑下拉多选
image.png
image.png

上传

不需要预览，可点击可拖拽
upload1.png

图片文件上传，显示缩略图，有上传数量限制
upload2.png

表单验证

  1. 必填字段在label左边用红色*标识
  2. 边输入边提示，从未输入直接进行提交，也会进行全字段检验

image.png
image.png

开发使用：

参考AntD组件：
Modal、Form、Input、InputNumber、Select、Radio、Checkbox、Upload、DatePicker、TimePicker、Cascader，参考链接：https://ant-design.gitee.io/docs/react/introduce-cn

我们如何使用：
参考丰田BO端项目Form组件
image.png