vue3-json-schema-form
v0.1.2
Published
[![coverage](https://img.shields.io/codecov/c/gh/cwy007/vue3-json-schema-form/main)](https://codecov.io/gh/cwy007/vue3-json-schema-form)
Downloads
9
Maintainers
Readme
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/
参考
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()], }, }
JSON Pointer defines a string syntax for identifying a specific value within a JavaScript Object Notation (JSON) document. https://tools.ietf.org/html/rfc6901
The lodash method
_.union
exported as a Node.js module.Simplify your schema by combining allOf
rimraf The UNIX command rm -rf for node.
xargs 命令--Shell 管道传递参数
gb | grep [45678]-* | xargs git branch -D
这里 git branch 不能使用 alias gb