Appearance
JsonSchema
JSON Schema 编辑器是一种用于创建、编辑和管理 JSON Schema 数据结构的工具。它通常提供用户友好的界面,允许用户通过交互式的方式定义和修改 JSON Schema 的属性、类型和结构。
基础用法
属性
| 属性名 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
schemaData | 初始的 JSON Schema 数据,用于初始化编辑器中的变量结构。 | Object | {} | - |
size | 输入框尺寸 | small / default / large | default | - |
事件
| 事件名 | 说明 | 参数 |
|---|---|---|
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 数据中是否为必填项。用户可以通过开关组件进行设置。
嵌套结构:支持对象和数组类型的嵌套编辑。对于类型为
object和array[object]的变量,用户可以添加子变量。自动清空子集:当变量类型从
object或array[object]切换为其他类型时,其子变量会自动清空,以保持数据结构的正确性。剪贴板复制:通过父组件的
getJsonSchema方法,可以获取当前的 JSON Schema,可以自定义复制等功能方便在其他地方使用。深度限制:编辑器对嵌套深度有限制(默认为 4 级),以防止过深的嵌套导致的复杂性和性能问题。
通过这些功能,JsonSchema 组件提供了一种灵活且强大的方式来构建和管理 JSON Schema 数据结构,适用于需要动态生成或编辑 JSON 数据结构的场景。