amis2/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

3.5 KiB
Raw Blame History

title description type group menuName icon order
JSONSchema Editor 0 null JSONSchema Editor 61

基本用法

1.9.0 及以上版本

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    debug: true,
    "body": [
        {
            "type": "json-schema-editor",
            "name": "schema",
            "label": "字段类型"
        }
    ]
}

顶级类型可配置

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "json-schema-editor",
            "name": "schema",
            "label": "字段类型",
            "rootTypeMutable": true,
            "showRootInfo": true
        }
    ]
}

预设类型

通过设置 definitions 属性可以提供一些默认类型,可以减少类型的定义成本。

{
    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 可以定制弹窗中的配置面板。

{
    "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 用来配置预设类型