vue3-json-schema-form

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/

参考

• pure-vue/vue3-jsonschema-from

• prettier

• Ajv: Another JSON Schema Validator

• json-schema

• v3.cn.vuejs.org

• JSX for vue3

• ajv-formats

• vue-jss

• monaco-editor

• Announcing Import Type

• import type 含义

• Uncaught Error: Unexpected usage

  • 解决方法

  // monaco-editor 报错信息
  Error: Unexpected usage
      at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:459)
      at eval (webWorker.js?af50:38)
      at eval (errors.js?fdcc:12)
  
  // 解决方法
  // 添加 vue.config.js 文件
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
  
  module.exports = {
    configureWebpack: {
      plugins: [new MonacoWebpackPlugin()],
    },
  }

• jsonpointer

  JSON Pointer defines a string syntax for identifying a specific value within a JavaScript Object Notation (JSON) document. https://tools.ietf.org/html/rfc6901

• lodash.union

  The lodash method _.union exported as a Node.js module.

• json-schema-merge-allof

  Simplify your schema by combining allOf

• Understanding JSON Schema

• json schema getting-started-step-by-step

• jestjs.io

• vue-cli 构建目标

• rimraf The UNIX command rm -rf for node.

• AMD, CMD, CommonJS 和 UMD

• xargs 命令--Shell 管道传递参数 gb | grep [45678]-* | xargs git branch -D 这里 git branch 不能使用 alias gb

• git 删除多个分支，怎么操作？

• 代理(Proxy)和反射(Reflection)

• shields.io/

• github.com/features/actions

• github.com/actions/checkout

• codecov.io

• package.json 配置项详解

• npm 错误 Can't publish over previously published ver?

• npm package.json 属性详解

• publicPath add vue.config.js and deploy github.io