JSONSchema Editor

基本用法

1.9.0 及以上版本

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

  1. ## 顶级类型可配置
  2. ```schema: scope="body"
  3. {
  4. "type": "form",
  5. "api": "/api/mock2/form/saveForm",
  6. "body": [
  7. {
  8. "type": "json-schema-editor",
  9. "name": "schema",
  10. "label": "字段类型",
  11. "rootTypeMutable": true,
  12. "showRootInfo": true
  13. }
  14. ]
  15. }

预设类型

通过设置 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: ‘用户名信息’ },

  1. id: {
  2. type: 'interger',
  3. title: '用户ID'
  4. },
  5. email: {
  6. type: 'string',
  7. title: '用户邮箱'
  8. },
  9. displayName: {
  10. type: 'string',
  11. title: '用户昵称'
  12. }
  13. }
  14. }
  15. }

}

  1. ## 开启高级配置
  2. 通过 `enableAdvancedSetting` 可以开启高级配置,同时通过 `advancedSettings` 可以定制弹窗中的配置面板。
  3. ```schema: scope="body"
  4. {
  5. "type": "form",
  6. "body": [
  7. {
  8. "type": "json-schema-editor",
  9. "name": "schema",
  10. "label": "字段类型",
  11. "enableAdvancedSetting": true,
  12. "advancedSettings": {
  13. "string": [
  14. {
  15. "type": "input-text",
  16. "name": "maxLength",
  17. "label": "Max Length"
  18. }
  19. ],
  20. "number": [
  21. {
  22. "type": "input-number",
  23. "name": "max",
  24. "label": "Max"
  25. }
  26. ]
  27. }
  28. }
  29. ]
  30. }

属性表

属性名 类型 默认值 说明
rootTypeMutable boolean false 顶级类型是否可配置
showRootInfo boolean false 是否显示顶级类型信息
disabledTypes Array<string> 用来禁用默认数据类型,默认类型有:string、number、interger、object、number、array、boolean、null
definitions object 用来配置预设类型