演示地址：https://form.lljj.me/vue-editor.html#/editor

项目地址：https://github.com/lljj-x/vue-json-schema-form/

基于 JSON Schema 开箱即用的大略活动可视化编辑器。

htmljson编辑器基于JSON Schema的前端可视化运动编纂器 NoSQL

背景

在做天生一个可视化店铺装修系统的时候，须要办理配置数据表单的通用性，参阅了一些现用的办理方案，终极通过 JSON Schema 来天生对应的表单和校验规则。

参考资料：

https://github.com/CntChen/cntchen.github.io/issues/15

JSON Schema 紧张利用在如下几点：

基于 JSON Schema 来动态天生数据配置表单和数据校验结合发布流程同步 JSON Schema 到后端系统做接口数据校验活动版块对应一个 JSON Schema 和一份视图 View组件 即可实现

首先可视化编辑器须要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，终极相互组装为一个页面。

每个板块我们不可避免的须要一个 View组件 来做展示，由于每个板块都长得不一样。
板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。

这样当我们在添加新的板块时，只须要开拓一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。

功能先容

基于Vue，依赖 ElementUi、vuedraggable、@lljj/vue-json-schema-form

板块支持配置化支持可添加数，是否可删除，置顶，置底，图标配置支持拖动或者点击高下移动，复制删除等调度页面布局支持页面预览模式支持编辑还原数据和默认板块数据配置视图组件支持异步加载不支持嵌套组件…

添加新的板块只须要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：

import as componentPackFlashSaleGoodsList from '../viewComponents/FlashSaleGoodsList';const tools = [ { groupName: '图文类', componentList: [{ // 比如这里添加新增的模块 title: '秒杀商品', // 板块标题 maxNum: 3, // 最多可添加次数 icon: 'el-icon-picture', // 工具栏图标类名 componentPack: componentPackFlashSaleGoodsList, // 重点是这个当前板块的组件包 additional: { bottomDisplay: true, // 是否置底显示 topDisplay: true, // 是否置顶显示 unRemove: true // 是否为不可移除 } }] }]

新增板块文件构造如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面临象栏配置导入的组件包文件)

import propsSchema from './schema.json';import uiSchema from './uiSchema.js';import errorSchema from './errorSchema.js';// 这里可以异步导入const View = () => import('./View.vue');const NAME = propsSchema.id;const componentViewName = `${NAME}View`;export { propsSchema, // JSON Schema 定义数据构造和天生表单 vue-json-schema-form 参数 componentViewName, // 视图View组件name，须要自己保持唯一 View, // 视图View组件 uiSchema, // uiSchema 赞助增强表单样式 不必须 vue-json-schema-form 参数 errorSchema, // 赞助增强表单校验缺点提示 不必须 vue-json-schema-form 参数 // customRule, // 自定义的校验规则 vue-json-schema-form 参数 （须要更多的vue-json-schema-form 参数参数可自己添加）};

导出模块阐明如下：

propsSchema： required JSON Schema配置，必须包含一个 id 的属性，并且要担保唯一，在保存和编辑数据时用来标识当前组件。
通报给 vue-json-schema-form 天生表单；componentViewName： required 板块View组件名，唯一，建议通过 id + View 拼接，只是为了在注册组件时的组件名，实在我也可以帮你天生，但是我没有；View： required required 板块View组件，须要异步导入就 () => import(‘./xxx.vue’)，View 组件必须包含一个名为 formData 的props接管当前表单数据；uiSchema：通报给 vue-json-schema-form 天生表单，用于增强天生表单的样式，可选；errorSchema：通报给 vue-json-schema-form 天生表单，用于增强表单的校验提示信息customRule：通报给 vue-json-schema-form 天生表单，用于自定义校验表单数据

如果须要更多 vue-json-schema-form 参数可直接在

packages/demo/src/vue-editor/views/editor/Editor.vue

渲染 VueElementForm 组件时添加即可。

新增板块可拜会 /packages/demo/src/vue-editor/views/editor/viewComponents 内现有板块工具栏和默认数据配/packages/demo/src/vue-editor/views/editor/config 文件夹内

全体实现相比拟较大略，感兴趣的可以花上两个小时看下源码，欢迎谈论提问。