npm:@aimake/form | Skypack
Usage no npm install needed!
<script type="module">
import aimakeForm from 'https://cdn.skypack.dev/@aimake/form';
</script>
README
@aimake/form
@aimake/form 是一个基于 AntD Form 的表单组件,用于快速生成一个 PC 端的表单,和 AntD Form 不同,@aimake/form 中集成了 AntD 组件库中所有的
"数据录入"类型的组件,用户无需再引入这些表单组件,可以通过配置化的方式快速产出一个表单。除了默认已经记载了 AntD "数据输入" 组件,@aimake/form 还同时支持用户自定义组件,只需要用户遵守统一的属性和接口规范。
@aimake/form 将表单中的所有涉及到数据抽象成三个属性:config(定义表单项内容)、options(选择类组件的选项)、defaultValues(表单项初始值)。无论是哪种联动逻辑,无一例外均是对这三个属性的修改,可以通过 Form 组件的 onFieldsChange 函数监听用户操作,修改以上三个属性。
安装
npm install @aimake/form
配置文件范例
[
{
"label": "日期范围",
"name": "range",
"type": "RangePicker",
"format": "YYYY/MM/DD HH:mm:ss"
},
{
"label": "日期",
"name": "date",
"type": "DatePicker",
"format": "YYYY/MM/DD HH:mm:ss"
},
{
"label": "比对阈值",
"name": "threshold",
"type": "Input",
"addonBefore": ">=",
"pattern": "^\\d+(\\.\\d+)?
quot;,
"required": true
},
{
"label": "门店",
"name": "shopId",
"type": "Select"
},
{
"label": "线索",
"name": "haveClue",
"type": "Radio"
},
{
"label": "年龄",
"name": "age",
"type": "Slider",
"defaultValue": 50,
"min": 0,
"max": 120
},
{
"label": "数量",
"name": "count",
"type": "InputNumber"
},
{
"label": "开关",
"name": "switch",
"type": "Switch"
},
{
"label": "邮箱",
"name": "email",
"type": "AutoComplete"
}
]
代码范例
<AiMakeForm
form={form}
layout="horizontal"
onSubmit={this.handleSubmit}
config={formConfig}
options={formOptions}
defaultValues={formDefaultValue}
submitText="搜索"
formComponents={{"Uploader": Uploader}}
clear
/>
详细代码可见 @aimake/form 下 examples 目录中的代码。运行方法:在 @aimake/form 目录下运行 npm run start,浏览器输入 localhost:8080,即可预览页面。(需要先绑定 127.0.0.1 localhost)
API
AiMakeForm
AiMakeForm 组件本身是对 AntD Form 组件的包装,接受 AntD Form 的所有属性,除此以外还有以下属性。
props:
属性名 |
类型 |
默认值 |
描述 |
form |
object |
必填项 |
由 AntD From 创建并传入,参考 AntD Form |
config |
array |
[] |
表单配置项数组,由于描述表单内容 |
children |
element |
null |
表单子元素,可任意定义,会渲染在表单内容后面 |
span |
number |
8 |
分栏数,参考 AntD Col |
options |
object |
{} |
选择类组件的选项,通过字段名对应 |
defaultValues |
object |
{} |
表单项初始值,通过字段名对应 |
formComponents |
object |
{} |
自定义组件,可通过配置接入 |
submit |
bool |
true |
是否需要提交按钮 |
submitText |
string |
'查询' |
查询按钮文字 |
clear |
bool |
false |
是否需要重置按钮 |
clearText |
string |
'重置' |
重置按钮文字 |
cancel |
bool |
false |
是否需要取消按钮 |
cancelText |
string |
'取消' |
取消按钮文字 |
onCancel |
func |
()=>{} |
取消按钮响应 |
组件配置项
每个表单项组件均是对 AntD "数据录入"类型组件的封装,接受该组件的全部属性,除此以外还有以下属性。
props:
属性名 |
类型 |
默认值 |
描述 |
label |
string |
'' |
表单项标签 |
name |
string |
必填项 |
表单字段的唯一标识,对应表单提交的字段名 |
required |
bool |
false |
是否必填 |
requiredMsg |
string |
'请输入'|'请选择' |
必填提示文字 |
hide |
bool |
false |
是否隐藏 |
layout |
object |
{
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
}
}; |
表单项内部显示比例 |