Ultra Form
高级表单用于快速构建表单视图,使用 pro-form 需要使用 defineForm Functions。
高级表单基于对象的函数式编程(functional programming)思想。并将表单数据抽象为一个 JavaScript 对象,通过对这个对象进行操作和封装,让表单数据具有更好的可复用性和可维护性。
UltraForm 是基于 Naive Form 的可降级封装,与 Naive 功能完全对齐,内置了所有数据录入组件,在其之上还增加一些预设行为和布局。并且拥有公共的 API。
Form Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| is | UltraFormInstance | - | 组件的实例 |
| grid | boolean | true | 是否开启栅格布局 |
| cols | number | ResponsiveDescription | 24 | 显示的栅格数量 |
| x-gap | number | ResponsiveDescription | 0 | 横向间隔槽 |
| y-gap | number | ResponsiveDescription | 0 | 纵向间隔槽 |
Form Methods
| 名称 | 类型 | 说明 |
|---|---|---|
| validate | (paths?: string[]) => Promise<void> | 验证表项,传递 paths 过滤需要验证的参数 |
| resetValidate | (paths?: string[]) => void | 重置校验,传递 paths 过滤需要重置的参数 |
| resetFields | (paths?: string[]) => void | 重置表单数据为初始值,传递 paths 过滤需要重置的参数 |
Field Methods
| 名称 | 类型 | 说明 |
|---|---|---|
| config | (config) => Field | 携带并返回新的配置 |
| preventDefault | () => Field | 将 label、rules 置空 |
| preventRequired | () => Field | rules 中的 required 被删除 |
| preventAutofill | () => Field | 阻止浏览器自动填充 |
| clone | () => Field | 浅拷贝 field |
| cloneDeep | () => Field | 深拷贝 field |
Field Types
| 名称 | 说明 |
|---|---|
| date-picker | 日期选择器 |
| auto-complete | 自动完成 |
| cascader | 级联选择器 |
| input | 输入框 |
| input-number | 数字输入框 |
| rate | 评分 |
| time-picker | 时间选择器 |
| mention | 提及 |
| select | 选择器 |
| switch | 开关 |
| slider | 滑块 |
| radio | 单选框 |
| checkbox | 多选框 |
| textarea | 多行输入框 |
Slots
| 名称 | 类型 | 说明 |
|---|---|---|
| toolbars | () | 工具栏内容,使用该插槽默认开启工具栏模式 |