Skip to content

JsonSchema

JSON Schema 编辑器是一种用于创建、编辑和管理 JSON Schema 数据结构的工具。它通常提供用户友好的界面,允许用户通过交互式的方式定义和修改 JSON Schema 的属性、类型和结构。

基础用法

属性

属性名说明类型默认值版本
schemaData初始的 JSON Schema 数据,用于初始化编辑器中的变量结构。Object{}-
size输入框尺寸small / default / largedefault-

事件

事件名说明参数
update:schemaData当 JSON Schema 被修改时触发,返回更新后的 JSON Schema。(schemaData: Object) => void

方法

通过 expose 暴露的方法,可以在父组件中调用这些方法:

方法名说明参数
addRootVariable添加一个新的根变量。() => Object
getJsonSchema获取当前编辑器中的 JSON Schema。(不含变量名为空的数据)() => Object
validate校验变量名是否为空,返回一个 Promise。若存在未填写的变量名,则 Promise 被拒绝。() => Promise<void>

使用说明

  • 动态编辑:用户可以通过 UI 组件(如输入框、下拉选择框、开关等)动态编辑 JSON Schema 的属性。

    • prop:变量名,表示 JSON Schema 中的属性名称。用户可以通过输入框编辑此字段,支持最多 20 个字符。

    • type:变量类型,定义属性的数据类型。支持以下类型:

      • string:字符串类型
      • number:数字类型
      • object:对象类型
      • array[object]:对象数组类型
      • array[string]:字符串数组类型
      • array[number]:数字数组类型
    • description:描述,帮助大模型或用户理解参数的作用。用户可以通过输入框编辑此字段,支持最多 64 个字符。

    • required:是否必填,布尔值,表示该属性在 JSON 数据中是否为必填项。用户可以通过开关组件进行设置。

  • 嵌套结构:支持对象和数组类型的嵌套编辑。对于类型为 objectarray[object] 的变量,用户可以添加子变量。

  • 自动清空子集:当变量类型从 objectarray[object] 切换为其他类型时,其子变量会自动清空,以保持数据结构的正确性。

  • 剪贴板复制:通过父组件的 getJsonSchema 方法,可以获取当前的 JSON Schema,可以自定义复制等功能方便在其他地方使用。

  • 深度限制:编辑器对嵌套深度有限制(默认为 4 级),以防止过深的嵌套导致的复杂性和性能问题。

通过这些功能,JsonSchema 组件提供了一种灵活且强大的方式来构建和管理 JSON Schema 数据结构,适用于需要动态生成或编辑 JSON 数据结构的场景。