amis/docs/zh-CN/components/form/json-schema-editor.md
liaoxuezhi 195048b43b
feat: json-schema-editor 支持高级配置 (#4133)
* feat: json-schema-editor 支持高级配置

* feat: json-schema-editor 支持高级配置

* 点选组件数组也支持查看结构
2022-04-25 14:34:11 +08:00

133 lines
3.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: JSONSchema Editor
description:
type: 0
group: null
menuName: JSONSchema Editor
icon:
order: 61
---
## 基本用法
> 1.9.0 及以上版本
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
debug: true,
"body": [
{
"type": "json-schema-editor",
"name": "schema",
"label": "字段类型"
}
]
}
```
## 顶级类型可配置
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "json-schema-editor",
"name": "schema",
"label": "字段类型",
"rootTypeMutable": true,
"showRootInfo": true
}
]
}
```
## 预设类型
通过设置 definitions 属性可以提供一些默认类型,可以减少类型的定义成本。
```schema: scope="form-item"
{
label: 'JSON Schema Editor',
name: 'schema',
// showRootInfo: true,
// rootTypeMutable: true,
type: 'json-schema-editor',
disabledTypes: ['null', 'interger', 'boolean'],
definitions: {
user: {
type: 'object',
title: '用户',
properties: {
name: {
type: 'string',
title: '用户名',
description: '用户名信息'
},
id: {
type: 'interger',
title: '用户ID'
},
email: {
type: 'string',
title: '用户邮箱'
},
displayName: {
type: 'string',
title: '用户昵称'
}
}
}
}
}
```
## 开启高级配置
通过 `enableAdvancedSetting` 可以开启高级配置,同时通过 `advancedSettings` 可以定制弹窗中的配置面板。
```schema: scope="body"
{
"type": "form",
"body": [
{
"type": "json-schema-editor",
"name": "schema",
"label": "字段类型",
"enableAdvancedSetting": true,
"advancedSettings": {
"string": [
{
"type": "input-text",
"name": "maxLength",
"label": "Max Length"
}
],
"number": [
{
"type": "input-number",
"name": "max",
"label": "Max"
}
]
}
}
]
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------------- | ------ | ------------------------------------------------------------------------------------------------ |
| rootTypeMutable | `boolean` | false | 顶级类型是否可配置 |
| showRootInfo | `boolean` | false | 是否显示顶级类型信息 |
| disabledTypes | `Array<string>` | | 用来禁用默认数据类型默认类型有string、number、interger、object、number、array、boolean、null |
| definitions | `object` | | 用来配置预设类型 |