vue3-json-schema-form

a form generator based on jsonschema for vue3

Usage no npm install needed!

<script type="module">
  import vue3JsonSchemaForm from 'https://cdn.skypack.dev/vue3-json-schema-form';
</script>

README

vue3-json-schema-form

coverage

a form generator based on jsonschema for vue3

Project setup

npm install
npm run serve
npm run build
npm run test:unit
npm run lint

API 设计

<JsonSchemaForm
  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方法，你可以通过

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
  }
}

git

# 查看远程分支
git granch -r
# 查看所有分支
git branch -a

# 查看第3章的分支
gb -r | grep origin/3

目录说明

# ./lib/ 文件夹下是组件库的代码，也就是完成后需要打包发布的代码
./lib/
# ./src/ 文件夹下的代码是演示的代码，在开发时使用
./src/

参考