简介
esquadro 是一个基于 react 和 antd 的可视化表单设计器。
安装
使用 npm 安装：
npm install esquadro
使用
在项目中引入 esquadro 和 antd 的样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------------
------ -------- ---- -----------
----- --- - -- -- -
----- ---------- - ------ -- -
------------------
--
------ -
--------- ------------------- --
--
--
-------------------- --- ---------------------------------API
Props
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| onSave | Function | - | 表单保存事件，参数为表单数据 |
| onClose | Function | - | 表单关闭事件 |
| initialData | Object | - | 初始表单数据，用于编辑表单时 |
| formConfigs | Array | - | 表单配置，具体格式见下文 |
| headerTitle | String | 可视化表单设计器 |
表单设计器的标题 |
| footer | ReactNode | - | 表单设计器页脚的自定义内容 |
| previewOnly | Boolean | false |
是否只能预览表单，不能编辑 |
formConfigs 格式
formConfigs 是一个由多个字段配置组成的数组，每个字段配置有以下属性：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| type | String | - | 表单字段类型，可选值：input、textarea、number、select、radio、checkbox、datePicker、timePicker、switch |
| name | String | - | 表单字段名称 |
| label | String | - | 表单字段标签 |
| placeholder | String | - | 表单字段占位符 |
| options | Array | - | 选项数组（仅适用于 select、radio、checkbox 类型），包含 label（标签）和 value（值）两个属性 |
| textareaRows | Number | 4（textarea）、2（input） |
textarea 或 input 的 rows 属性 |
| defaultValue | any | - | 表单字段默认值 |
| rules | Array | - | 表单验证规则数组（具体格式见 antd 文档） |
示例代码
一个简单的示例，包含一个文本框和一个日期选择器：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ---------------------
------ -------- ---- -----------
----- ----------- - -
-
----- --------
----- -------
------ -----
------------ --------
------ -
- --------- ----- -------- -------- --
--
--
-
----- -------------
----- -----------
------ -------
------------ ----------
------ -
- ----- --------- --------- ----- -------- ---------- --
--
--
--
----- --- - -- -- -
----- ---------- - ------ -- -
------------------
--
------ -
---------
-------------------------
-------------------
--
--
--
-------------------- --- ---------------------------------结语
通过本篇文章的学习，相信大家已经了解了 esquadro 的基本使用方法，可以快速实现一个可视化表单设计器。如有任何疑问或建议，欢迎提出，我会及时回复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e230b