Skip to content

F
form-render

嗨向前出发 / form-render
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
F
form-render

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 bab14a25 编写于 作者: F FateRiddle
浏览文件
操作

更新文档

上级 ef1dd316
隐藏空白更改
内联 并排
Showing with 866 addition and 40 deletion
.umirc.js
浏览文件 @ bab14a25
......@@ -12,10 +12,8 @@ export default defineConfig({
title: 'FormRender',
path: '/form-render',
children: [
{ title: 'FR1.0', path: '/form-render' },
{ title: '0.x - 1.x 迁移', path: '/form-render/migrate' },
{ title: '教程', path: '/form-render/guide' },
{ title: '自定义组件', path: '/form-render/widgets' },
{ title: 'Schema', path: '/form-render/schema' },
{ title: 'Playground', path: '/playground' },
],
},
......
CONTRIBUTION.md
浏览文件 @ bab14a25
......@@ -25,6 +25,8 @@ npm run clean
yarn
```
注意 lerna clean 不会清除顶层的 node_modules，所以如果因为特殊原因要彻底清空依赖，请执行`rm -rf node_modules`
5. 发布
在顶层执行
......
README.md
浏览文件 @ bab14a25
......@@ -24,8 +24,8 @@ XRender
> 阿里巴巴 - 飞猪中后台开箱即用解决方案
## 优势
- 待补充
## 调试
......
docs/form-render/demo.md 已删除 100644 → 0
浏览文件 @ ef1dd316
---
title: 组件样例
order: 2
nav:
order: 5
title: FR 1.0
# sidemenu: false
# gapless: true
---
<!-- <code src='./index.jsx' /> -->
<code src='./simple1.jsx' />
docs/form-render/index.md → docs/form-render/guide/index.md
浏览文件 @ bab14a25
---
title: 组件样例
order: 2
nav:
order: 5
title: FR 1.0
# sidemenu: false
# gapless: true
order: 1
group:
title: 开始使用
order: 1
toc: content
---
form-render 1.x 是下一代的 `React.js` 表单解决方案。项目从内核级别进行了重写，为了能切实承接日益复杂的表单场景需求。我们的目标是以强大的扩展能力对表单场景 100%的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见[0.x - 1.0 迁移文档](/FR1.0/migrate)
## 安装
```shell
yarn add form-render
# 或者
npm i form-render
```
form-render 默认使用 antd 作为组件库，并以 peerDependencies 的方式依赖，所以需要同时安装 antd 的依赖。其他的组件库可通过 widgets 的方式传入，详见[自定义组件](/form-render/widget))
```shell
yarn add antd
```
### 第一个表单
```js
......@@ -113,7 +125,7 @@ export default Demo;
1. 以 schema 来描述表单展示，提交方式与 antd v4 的方式类似
2. schema 以国际标准的 JSON schema 为基础，同时能够方便使用任何 antd 的 props
3. 通过 bind 字段，我们允许数据的双向绑定，数据展示和真实提交的数据可以根据开发需求不同（从服务端接口拿到不规则数据时，也能直接使用）
3. 通过 bind 字段，我们允许数据的双向绑定，数据展示和真实提交的数据可以根据开发需求不同（例如从服务端接口拿到不规则数据时，也能直接使用）
### Form
......@@ -166,8 +178,14 @@ const Demo = () => {
| touchedKeys | 已经触碰过的 field 的数据路径 | string[] |
| formData | 表单内部维护的数据，建议使用 getValues/setValues | object |
## 新功能
## schema 可以不用手写哦！
使用 [表单设计器](https://x-render.gitee.io/schema-generator/)，拖拖拽拽导出 schema，丢到代码里生成可用表单
<img src="https://gw.alipayobjects.com/mdn/rms_e18934/afts/img/A*4QYNTbKU6xAAAAAAAAAAAABkARQnAQ?raw=true" width="750px"/>
<img src="https://gw.alipayobjects.com/mdn/rms_e18934/afts/img/A*FfTuRYjRd1AAAAAAAAAAAABkARQnAQ?raw=true" alt="schema编辑器" width='750px' />
还可在 vscode 商店搜索 “formrender” 下载配套 [可视化插件](https://marketplace.visualstudio.com/items?itemName=F-loat.vscode-plugin-fr-schema)
- 大小从原本的 70k -> 11k
- 校验：antd 表单校验语法全支持
- UI 和数据不再需要一致，展示更自用，从
<img src="https://img.alicdn.com/tfs/TB1b53cmGNj0u4jSZFyXXXgMVXa-2740-1748.gif" alt="schema编辑器" width='750px' />
docs/form-render/migrate/index.md → docs/form-render/guide/migrate.md
浏览文件 @ bab14a25
---
order: 1
group:
title: 教程
order: 2
toc: content
---
## 迁移文档
舍
## 1.0 升级了什么
-
取舍
1. 不再允许函数式的表达式了！
......@@ -32,3 +44,9 @@ input1: {
2. 不再计算初始值
3. 不再
## 如何迁移
<code src='../demo/simple1.jsx' />
<code src='../demo/simple.jsx' />
docs/form-render/schema/pattern.md 0 → 100644
浏览文件 @ bab14a25
---
order: 3
group:
title: Schema
order: 3
toc: content
---
# pattern 自定义正则校验
### 概述
- 简单的长度校验推荐使用 [schema](/form-render/config/schema) 中的属性
- pattern 是存在于 [schema](/form-render/config/schema) 中属性的一个字段，长用在当长度限制还不满足要求的场景，可通过正则的方式来对用户输入项进行校验
- pattern 和 required、minLength、maxLength 等这一类显示为`&&`的关系，当有一个不满足时候，onValidate 回调中将会返回不符合的数组项
### 格式
- 格式和 JS 正则的格式保持一致，实际为此正则类中的 pattern 字段 `new RegExp(pattern).test(value)`
### 常见 pattern 规则
| 字符 | 含意 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| \ | 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。 例如，’n’ 匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘' 匹配 “” 而 “\(” 则匹配 “(“。 |
| ^ | 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 ‘\n’ 或 ‘\r’ 之后的位置。 |
| \$ | 匹配输入字符串的结束位置。如果设置了 RegExp 对象的 Multiline 属性，\$ 也匹配 ‘\n’ 或 ‘\r’ 之前的位置。 |
| \* | 匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。 * 等价于{0,}。 |
| + | 匹配前面的子表达式一次或多次。例如，’zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。 |
| ? | 匹配前面的子表达式零次或一次。例如，”do(es)?” 可以匹配 “do” 或 “does” 中的”do” 。? 等价于 {0,1}。 |
| {n} | n 是一个非负整数。匹配确定的 n 次。例如，’o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个 o。 |
| {n,} | n 是一个非负整数。至少匹配 n 次。 例如: ‘o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有 o。 ‘o{1,}’ 等价于 ‘o+’。’o{0,}’ 则等价于 ‘o\*’。 |
| {n,m} | m 和 n 均为非负整数，其中 n <= m。最少匹配 n 次且最多匹配 m 次。例如: “o{1,3}” 将匹配 “fooooood” 中的前三个 o。’o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。 |
| ? | 当该字符紧跟在任何一个其他限制符 (\*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。 非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。 例如，对于字符串 “oooo”，’o+?’ 将匹配单个 “o”，而 ‘o+’ 将匹配所有 ‘o’。 |
| . | 匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]’ 的模式。 |
| (pattern) | 匹配 pattern 并获取这一匹配。 所获取的匹配可以从产生的 Matches 集合得到，要匹配圆括号字符，请使用 ‘‘或‘‘或‘’。 |
| (?:pattern) | 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。 这在使用 “或” 字符 (\|) 来组合一个模式的各个部分是很有用。 例如， ‘industr(?:y\|ies) 就是一个比 ‘industry\|industries’ 更简略的表达式。 |
| (?=pattern) | **肯定** 顺序环视 **：子表达式能够匹配右侧的文本**正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， ‘Windows (?=95\|98\|NT\|2000)’ 能匹配 “Windows 2000” 中的 “Windows” ， 但不能匹配 “Windows 3.1” 中的 “Windows”。_预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索， 而不是从包含预查的字符之后开始。_ |
| (?!pattern) | **否定顺序环视：子表达式不能匹配右侧的文本**负向预查，在任何不匹配的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如’Windows (?!95\|98\|NT\|2000)’ 能匹配 “Windows 3.1” 中的 “Windows”， 但不能匹配 “Windows 2000” 中的 “Windows”。_预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索， 而不是从包含预查的字符之后开始_ |
| (?<=pattern))))) | **肯定逆序环视：子表达式能够匹配左侧的文本** |
| (?<!pattern))))) | **否定逆序环视：子表达式不能匹配左侧的文本** |
| x\|y | 匹配 x 或 y。例如，’z\|food’ 能匹配 “z” 或 “food”。’(z\|f)ood’ 则匹配 “zood” 或 “food”。 |
| [xyz] | 字符集合。匹配所包含的任意一个字符。例如， ‘[abc]’ 可以匹配 “plain” 中的 ‘a’。 |
| [^xyz] | 负值字符集合。匹配未包含的任意字符。例如， ‘[^abc]’ 可以匹配 “plain” 中的’p’。 |
| [a-z] | 字符范围。匹配指定范围内的任意字符。例如，’[a-z]’ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。 |
| [^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符。 例如，’[^a-z]’ 可以匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符。 |
| \b | 匹配一个单词边界，也就是指单词和空格间的位置。 例如， ‘er\b’ 可以匹配”never” 中的 ‘er’，但不能匹配 “verb” 中的 ‘er’。 |
| \B | 匹配非单词边界。’er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配 “never” 中的 ‘er’。 |
| \cx | 匹配由 x 指明的控制字符。 例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则将 c 视为一个原义的’c’字符。 |
| \d | 匹配一个数字字符。等价于 [0-9]。 |
| \D | 匹配一个非数字字符。等价于 [^0-9]。 |
docs/form-render/schema/schema.md 0 → 100644
浏览文件 @ bab14a25
---
order: 1
group:
title: Schema
order: 3
toc: content
---
# Schema
## 概述
- `schema` 是 FormRender 的必填 props，用于描述表单的基本信息、结构和校验。
- `schema` 在结构上使用了 `JSON Schema` 国际规范，例如
```json
{
"type": "object",
"properties": {
"count": {
"title": "数字",
"type": "number"
}
}
}
```
- 单个 schema 的书写分为基础属性和 props
```json
{
"type": "object",
"properties": {
"count": {
"title": "数字",
"type": "number",
"props": {
"step": 0.000000000001
}
}
}
}
```
- 引入了新类型`range`
- 使用字段 `enumNames`，用于描述下拉单选的选项文案（enumNames 曾经是 JSON Schema 的 draft 提案，但最后被否绝了）
- 这是权衡各类用户使用便利性的结果。毕竟`JSON Schema`是为了校验数据而生的，与表单的场景的侧重点是不尽相同的。当然`schema`规范坚守的原则是对于使用`JSON Schema`标准的用户做到不改一字快速接入
- 通过 `JSON Schema` 里的字段可以描述表单的标题、描述、类型、必须项、自定义正则校验等信息。想深入了解的同学，<a href="https://json-schema.org/understanding-json-schema/" target="_blank">Understanding JSON Schema</a>是笔者认为最好的学习文档，同时也可去 [Playground](/playground) 折腾
- 虽然这里我们只以 json 格式为例，但 javascript object 作为入参完全可以
一个基础的 schema 如下：
```json
{
"type": "object",
"properties": {
"jobNumber": {
"title": "数字",
"type": "number"
}
}
}
```
描述了一个 object 结构，其第一个属性为数字类型。最外层约定为 object 结构，所有 schema 都需要如是写。
## 通用参数
对于每一个表单控件，我们都会使用如下的 schema 描述
```json
{
"title": "数字",
"type": "number"
}
```
### title
表单的标题信息，作为 label 展示，注意 title 为""时占位，title 不写时不占位
### description
表单的描述信息，常将填写注意点放入此参数
### type
表单的类型，支持 string、number、boolean、array、object、range
### format
用来描述输入框的格式，支持 image、email、url、dateTime、date、time、upload, 其中 upload 为上传组件
### pattern
自定义正则校验，用于校验 string 或 number 数据是否合格，详细使用可见 [pattern 自定义正则校验](/form-render/config/pattern)
### message
所有的校验都有默认文案，有时你希望校验提示自定义的文案，就需要使用 message 字段。message 一般与 pattern、format、maxLength 等字段共同使用。简单的例子：
```json
{
"title": "字符串",
"description": "英文或数字组合",
"type": "string",
"format": "email",
"pattern": "^[A-Za-z0-9@]+$",
"message": {
"pattern": "输入的不正确哦~",
"email": "不是一个email哦~"
}
}
```
也有唯一一个`message.trim`，单独使用。用于定制如果输入内容有前后空格的时候的提示
```json
{
"title": "一个地址链接",
"type": "string",
"message": {
"trim": "输入项有空格哦~"
}
}
```
所有支持的 key 如下：
| key | 描述 |
| ------------- | ------------------------------------------------------------- |
| pattern | 配合 pattern 字段使用，正则校验的自定义提示文案 |
| required | 配合 required 字段使用，必填的自定义提示文案 |
| maxLength | 配合 maxLength 字段使用，input 框输入最大长度的自定义提示文案 |
| minLength | 配合 minLength 字段使用，input 框输入最小长度的自定义提示文案 |
| maximum | 配合 maximum 字段使用，number 框输入最大长度的自定义提示文案 |
| minimum | 配合 minimum 字段使用，number 框输入最小长度的自定义提示文案 |
| format: email | 配合 format 字段使用，email 格式校验的自定义提示文案 |
| format: url | 配合 format 字段使用，url 格式校验的自定义提示文案 |
| format: image | 配合 format 字段使用，图片格式校验的自定义提示文案 |
| trim | 输入内容有空格时的自定义提示文案 |
### default
默认值，对象类型不能使用 default，其他类型包括 array 都可以使用 default：
```json
"list": {
"type": "array",
"items": {
"type": "object",
"properties": {
"x": {
"type": "string",
}
}
},
"default": [{ "x": "a" }, { "x": "b" }]
}
```
## 各个 type 的特有属性
### type: "string"
string 类对应的控件非常多, 使用 `format` 字段指定使用组件：
```json
// 默认 input
"input": {
"title": "简单输入框",
"type": "string",
}
// textarea
"textarea": {
"title": "简单文本编辑框",
"type": "string",
"format": "textarea"
}
// 颜色组件
"color": {
"title": "颜色选择",
"type": "string",
"format": "color"
}
// 日期组件
"date": {
"title": "日期选择",
"type": "string",
"format": "date" // "dateTime"
}
// 时间组件
"time": {
"title": "时间选择",
"type": "string",
"format": "time"
}
// 图片链接组件
"image": {
"title": "图片展示",
"type": "string",
"format": "image"
}
```
注意的字段：
- 输入框：input、textarea
- `minLength`：字符串最小长度
- `maxLength`：字符串最大长度
- 单选（类型也可能是 number）
- `enum` 选项值
- `enumNames` 选项的文案
```json
{
"title": "单选",
"type": "string",
"enum": ["hz", "wh", "gy"],
"enumNames": ["杭州", "武汉", "贵阳"]
}
```
单选默认会选中第一项，如果希望默认啥都不选，可设置 default: null。如果默认想选某一项，也使用 default 等于那一项的值来实现
### type: "number"
- `min`：数字最小值
- `max`：数字最大值
- `step`：允许递增的区间
### type: "object"
- `properties`：描述 object 的结构，必要属性
- `required`：描述对象下哪些项必填，非必要属性。为数组结构，每项是对应必填组件的 name
```json
{
"title": "用户信息",
"type": "object",
"properties": {
"tickets": {
"title": "门票数",
"type": "number"
}
},
"required": ["tickets"]
}
```
### type: "array"
`Array`的数据结构可能是：列表 & 多选框
- `items`：用于描述 Array 中每个 item 的结构、类型
- 列表：
- `minItems`：最少数组项为几项
- `maxItems`：最多数组项为几项
- `uniqueItems`：用于判断数组的元素是否有重复。`uniqueItems` 的值支持 boolean 和 string 两种类型
```js
// 1. 判断列表元素是否有重复
"uniqueItems": true
// 校验结果： 不通过。存在重复元素
[
{ "id": 1, "type": "topic" },
{ "id": 1, "type": "topic" }
]
// 2. 判断列表元素的某个特定属性是否有重复，例如 id
"uniqueItems": "id"
// 校验结果：不通过。存在重复的 id 值
[
{ "id": 3, "type": "vote" },
{ "id": 3, "type": "topic" }
]
```
// string 值支持复杂结构
"uniqueItems": "x.y"
// 校验结果：不通过。存在重复的 x.y 值
```
[
{ "id": 1, "x": {"y": 1} },
{ "id": 2, "x": {"y": 1} }
]
```
```json
{
"title": "对象数组",
"type": "array",
"minItems": 1,
"maxItems": 3,
"uniqueItems": true,
"items": {
"type": "object",
"properties": {
"tickets": {
"title": "门票数",
"type": "number"
}
}
}
}
```
- 多选框
- `enum`：参考单选
- `enumNames`：参考单选, 只写 enum 不写 enumNames 时，会默认使用 enum 作为 enumNames
```json
{
"title": "多选",
"type": "array",
"items": {
"type": "string"
},
"enum": ["hz", "wh", "gy"],
"enumNames": ["杭州", "武汉", "贵阳"]
}
```
### type: "range"
长度为 2 的 array，目前支持的组件为时间范围
```json
{
"title": "日期范围",
"type": "range",
"format": "dateTime",
"ui:options": {
"placeholder": ["开始", "结束"]
}
}
```
### type: "html"
只要注明`type: "html"`, FR 支持 html 元素的渲染，最常用的是纯文本, 如下例：
```json
"html": {
"title": "html元素的使用",
"type": "object",
"properties": {
"html1": {
"title": "纯字符串",
"type": "html",
"default": "hello world"
},
"html2": {
"title": "使用formData",
"type": "html",
"default": "hello world"
},
"input": {
"title": "放在尾部",
"type": "string",
"ui:width": "70%"
},
"html3": {
"type": "html",
"default": "<a>注意事项</a>",
"ui:width": "30%"
}
}
}
```
渲染结果如下：
<img src="https://img.alicdn.com/tfs/TB18ug4XTM11u4jSZPxXXahcXXa-571-190.jpg" width="500px" />
## 一个健全的结构
```json
{
"type": "object",
"properties": {
"stringDemo": {
"title": "字符串",
"description": "英文或数字组合",
"type": "string",
"pattern": "^[A-Za-z0-9]+$",
"message": {
"pattern": "请输入正确格式"
}
},
"imgDemo": {
"title": "图片",
"type": "string",
"format": "image",
"default": "'https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png'"
},
"disabledDemo": {
"title": "不可用",
"type": "string",
"default": "我是一个被 disabled 的值"
},
"enumDemo": {
"title": "枚举",
"enum": ["A", "B"],
"enumNames": ["养成", "动作"]
},
"dateDemo": {
"title": "时间",
"format": "dateTime",
"type": "string"
},
"objDemo": {
"title": "单个对象",
"description": "这是一个对象类型",
"type": "object",
"properties": {
"isLike": {
"title": "单选项",
"type": "boolean",
"default": true
},
"background": {
"title": "颜色选择",
"description": "特殊面板",
"format": "color",
"type": "string"
}
}
},
"arrDemo": {
"title": "对象数组",
"description": "对象数组嵌套功能",
"type": "array",
"minItems": 1,
"maxItems": 3,
"items": {
"type": "object",
"properties": {
"name": {
"title": "字符名称",
"description": "string类型",
"type": "string",
"pattern": "^[A-Za-z0-9]+$"
},
"num": {
"title": "数字参数",
"description": "number类型",
"type": "number"
}
}
}
}
},
"required": ["stringDemo", "dateDemo"]
}
```
docs/form-render/schema/uiSchema.md 0 → 100644
浏览文件 @ bab14a25
---
order: 2
group:
title: Schema
order: 3
toc: content
---
# UI:Schema
## 概述
- uiSchema 虽然不是必备参数，但是通过它可以增强 FormRender 展示的丰富性，例如：
- 通过 uiSchema 可以覆盖 schema 中 type 对应的默认 widget 组件
- 通过 `ui:disabled`、`ui:readonly`、`ui:hidden` 属性来控制表单项的 UI 展示
- 通过 `ui:options` 属性能够实现大量特定的 ui 展示选项
## 使用规范
- uiSchema 里所有的字段都以 `ui:` 开始，如 `ui:widget`。
- 为了满足各用户的使用偏好，uiSchema 可以单独书写，也可以完全归并到 schema，例如：
```json
{
"schema": {
"type": "object",
"properties": {
"string": {
"title": "字符串",
"type": "string"
}
}
},
"uiSchema": {
"string": {
"ui:width": "50%"
}
}
}
```
可以合并为
```json
{
"schema": {
"type": "object",
"properties": {
"string": {
"title": "字符串",
"type": "string",
"ui:width": "50%"
}
}
}
}
```
事实上 form-render 内部处理协议时第一件事就是将 schema 和 uiSchema 合并，所以上述两种协议的渲染效果是一致的。前者适用于遵循 json schema 的团队无缝接入，后者在书写上更为高效，推荐大多数用户使用。
## 覆盖 schema 中表单项对应的默认 UI Widget
| 类型 | type | 默认 widget | 其他支持 widget(备注) |
| ------ | :------------------------: | :---------: | :-------------------: |
| 布尔值 | boolean | checkbox | switch、radio |
| 字符串 | string | input | color、date、textarea |
| 数字 | number | number | slider |
| 单选项 | string/number(带属性 enum) | select | radio |
| 多选 | array(带属性 enum) | checkboxes | multiSelect |
## 共通的表单 UI 配置
### `ui:disabled`
可控制 input、number、date、checkbox、radio、select、switch 对于组件的 disabled 属性(变灰不可点击)
### `ui:labelWidth`
用于控制本元素以及其子元素（如果本元素是对象或列表）的标签宽度，使用方法与 FR 的全局变量`labelWidth`相同
```js
"someList": {
// 写法1
"ui:labelWidth": 180,
// 写法2
"ui:labelWidth": '4rem',
// 写法3
"ui:labelWidth": '20%',
}
```
### `ui:readonly` (注意由于历史原因，不是驼峰哦)
可控制 input、number 组件中的 `readOnly` 属性(不可编辑，但不变灰)，列表也支持`ui:readonly`，效果是列表的控件都会隐藏，导致列表不能增、删和拖拽，进入“只读”模式。但注意列表内的内容还是允许修改的，所以特别要注意如果列表套列表的场景，内部的列表也要 "ui:readonly": true
```js
"someList": {
"ui:readonly": true
}
```
### `ui:hidden`
可控制所有基础组件是否显示，可使用 true/false 或函数表达式，例如：
```json
"age": {
"ui:hidden": false
}
// 或
"agree": {
"title": "是否同意",
"type": "boolean"
},
"someObj": {
"title": "对象",
"type": "object",
"properties": {
"personType": {
"title": "类型",
"type": "number",
"enum": [1, 2, 3]
},
"age": {
"ui:hidden": "{{formData.agree==false && rootValue.personType!=2}}"
}
}
}
```
如果使用如上函数表达式，age 组件将在 agree 组件的值为 false 且 personType 组件不等于 2 时隐藏。其中`formData`指向整个表单值，`rootValue`指向对应组件的父级元素值。函数表达式的详细写法见[如何联动](/guide/advanced/function)
### `ui:className`
添加组件 root 元素的 className（和 fr-field 这个 className 在同级），用于自定义单独组件的样式
### `ui:width`
单个基础组件的长度，建议使用百分比例如`"ui:width":"50%"`。
#### `ui:column`
用于便捷控制一行排版几个元素，使用方法与 FR 的 props `column`相同
### `ui:displayType`
用于控制 label 和表单 input 是同行左右展示还是分两行展示，使用方法与 FR 的 props `displayType`相同
### `ui:showDescIcon`
用于控制详情描述（description）是正常展示还是用一个 icon 替代（鼠标悬浮后弹 pop 展示详情描述），使用方法与 FR 的 props `showDescIcon`相同
### `ui:options`
`ui:options` 里存放特定元素的特定配置。例如`textarea`的`rows`
```json
"textareaDemo": {
"ui:widget": "textarea",
"ui:options": {
"rows": 5
}
}
```
1. **基本上所有`antd`/ `fusion`文档中组件的 props 都可以使用 `ui:options` 的方式来直接使用。**
2. form-render 也内置了几个的常用的`ui:options`:
| option | 类型 | 可用组件 | 说明 |
| ----------- | :----------------------------------------: | :--------------: | :-------------------------------------------------------------------------: |
| noTrim | boolean | 所有 type:string | `{ noTrim: true }` 不去校验 input 是否有空格（默认校验） |
| foldable | boolean | 列表（array） | `{ foldable: true }`用于长列表的收起和展开 |
| hideDelete | boolean / (formData, rootValue) => boolean | 列表（array） | `{ hideDelete: true }`隐藏“删除”按钮。隐藏全部操作，使用`ui:readonly`: true |
| hideIndex | boolean | 列表（array） | 是否隐藏列表 item 的序号标 |
| buttons | array | 列表（array） | 下详 （注 2） |
| itemButtons | array | 列表（array） | 下详 （注 3） |
| pageSize | number | 列表（array） | 指定分页展示列表时的每页显示数量，默认 10 |
| collapsed | boolean | 对象（object） | `{ collapsed: true/false }`用于对象的收起和展开 |
| picker | "week"/"month"/"year" | 日期（date） | 使用 WeekPicker、MonthPicker 和 YearPicker （注 1） |
**注 1：** picker 的简单用法如下：
```json
// 月份选择器，picker属性可为"week"/"month"/"year"
"monthpicker": {
"title": "月份选择",
"type": "string",
"format": "date",
"ui:options": {
"picker": "month"
}
}
```
**注 2：** 列表默认展示“新增”按钮。`buttons` 用于添加更多列表操作按钮
写法如：
```json
"arrDemo": {
"ui:options": {
"buttons": [
// 可以不写 icon
{
"text": "Excel导入",
"callback": "someCallback"
},
{
"text": "删除全部",
"icon": "delete",
"callback": "clearAll"
},
{
"text": "复制上个",
"icon": "CopyOutlined", // fusion UI 侧 "icon": "copy"
"callback": "copyLast"
}
]
}
}
```
1. 其中`clearAll` 和 `copyLast` 是内置函数, 前者用于清空数组，后者用于复制最后一个元素
2. `callback` 也可使用自定义的名称 `someCallback`, 此时 form-render 会到 window.someCallback 上寻找回调函数，此回调函数可接受两个参数 `value` 和 `onChange`。
3. antd 侧的 button 名称遵循 [Antd icons 文档](https://ant.design/components/icon/)，且必须外部引入 `@ant-design/icons` 包。fusion 侧 icons 已经随包安装所以不需要安装依赖，名称也遵循 fusion 文档
```js
// value: 整个数组的值，onChange: 传入改变后的数组值，触发state更新
window.someCallback = (value, onChange) => {
onChange([]);
};
```
如上的 someCallback 会清空整个列表。
**注 3：** 列表的 item 默认展示“删除”按钮。`itemButtons` 用于添加更多对单个 item 的操作按钮，写法类似：
```json
"arrDemo": {
"ui:options": {
"itemButtons": [
{
"text": "复制",
"icon": "copy",
"callback": "copyMe"
}
]
}
}
```
然后在 window 上挂上方法 copyMe。callback 的参数和返回的结构为 `(list, idex) => newList`，其中 list 是列表的值，index 是此 item 对应数组的 index。例如你想复制本项，可以如上方式写 schema，并如下方式写`copyMe`函数：
```js
// 复制此项
window.copyMe = (list, index) => {
const item = list[index];
list.splice(index, 0, item);
return list;
};
```
### 一个样例
```json
{
"disabledDemo": {
"ui:disabled": true
},
"dateDemo": {
"ui:widget": "date" // 效果和 format: "date" 一致
},
"objDemo": {
// 覆盖object里面的元素对应的组件
"background": {
"ui:widget": "color"
}
},
"arrDemo": {
// 数组列表除了默认的新增按钮外，自定义的按钮组（每个按钮点击时会执行对应的callback，使用前请先咨询@侑夕）
"ui:options": {
"buttons": [
{
"text": "Excel导入",
"icon": "copy",
"callback": "someCallback"
},
{
"text": "删除全部",
"icon": "delete",
"callback": "clearAll"
},
{
"text": "复制上个",
"icon": "copy",
"callback": "copyLast"
}
]
}
}
}
```
docs/form-render/simple.md 已删除 100644 → 0
浏览文件 @ ef1dd316
---
title: 简单样例
order: 1
nav:
order: 5
title: FR 1.0
# sidemenu: false
# gapless: true
---
<code src='./simple.jsx' />
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或