API 设计

<JsonsrhemaForm
  schema={schema}
  value={value}
  onChange={handLechange}
  Locale={locale}
  contextRef={someRef}
  uischema={uischema}
/>

schema

json schema 对象,用来定义数据,同时也是我们定义表单的依据

value

表单的数据结果,你可以从外部改变这个 value,在表单被编辑的时候,会通过onChange透出 value

需要注意的是,因为 vue 使用的是可变数据,如果每次数据变化我们都去改变value的对象地址,那么会导致整个表单都需要重新渲染,这会导致性能降低。

从实践中来看,我们传入的对象,在内部修改其 field 的值基本不会有什么副作用,所以我们会使用这种方式来进行实现。也就是说,如果value是一个对象,那么从JsonSchemaForm内部修改的值,并不会改变value对象本身。我们仍然会触发onChange,因为可能在表单变化之后,使用者需要进行一些操作。

onChange

在表单值有任何变化的时候会触发该回调方法,并把新的值进行返回

locale

语言,使用ajv-i18n指定错误信息使用的语言

contextRef

你需要传入一个 vue3 的Ref对象,我们会在这个对象上挂载dovalidate方法,你可以通过

<Comp ref="comp" />
this.$refs.comp.xxx()

const yourRef = ref({})

onMounted(()={
    yourRef.value.dovalidate()
})

<JsonschemaForm contextRef={yourRef} />

这样来主动让表单进行校验

uiSchema

对表单的展现进行一些定制，其类型如下:

export interface VueJsonschemaConfig {
  title?: string
  descrription?: string
  component?: string
  additionProps?: { [key: string]: any }
  withFormItem?: boolean
  widget?: 'checkbox' | 'textarea' | 'select' | 'radio' | 'range' | string
  items?: UISchema | UISchema[]
}
export interface UISchema extends VueJsonSchemaConfig {
  properties?: { [property: string]: UISchema }
}