基于 Vue ElementUi JsonSchema快速构建一个带完整校验的form表单.
# 安装
npm install --save @lljj/vue-json-schema-form
# 或者:
yarn add @lljj/vue-json-schema-form
<template>
<VueForm
v-model="formData"
:schema="schema"
>
</VueForm>
</template>
<script >
// 使用
import VueForm from '@lljj/vue-json-schema-form';
export default {
name: 'Demo',
components: {
VueForm
},
data() {
return {
formData: {},
schema: {
type: 'object',
required: [
'firstName'
],
properties: {
firstName: {
type: 'string',
title: 'First name',
default: 'Jun'
},
lastName: {
type: 'string',
title: 'Last name'
},
}
}
};
}
};
</script>
# 安装依赖
yarn install
# 运行demo页 (同时运行 vue-editor,schema-form-eidtor)
yarn run demo:dev
# formEditor http://127.0.0.1:8800/
# 活动编辑器 http://127.0.0.1:8800/vue-editor.html
# 运行demo页 (单个 schema-form-eidtor)
yarn run demo:dev --dir=index
# 运行demo页 (单个 vue-editor)
yarn run demo:dev --dir=vue-editor
JSON Schema | Vue | Element Ui
原本是在很久前公司流产的项目类似淘宝店铺装修,也可以叫做前端可视化编辑。为了解决数据配置表单的通用性,所以使用json-schema描述数据结构,动态生成表单。
这样做的好处除了解决在每个配置表单的重复工作,服务端也可以基于同一份schema保持和前端一致的校验规则,不过对于使用 vue elementUi并未找到合适库可以直接使用,所以在后面一段时间决定自己实现一个 ..
Apache-2.0