Vue 前端可视化活动编辑器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 前端可视化活动编辑器相关的知识，希望对你有一定的参考价值。
参考技术A 先看效果，为一个可视化活动编辑器。基于 JSON Schema 开箱即用的简单活动可视化编辑器。
在做生成一个可视化店铺装修系统的时候，需要解决配置数据表单的通用性，参阅了一些现用的解决方案，最终通过 JSON Schema 来生成对应的表单和校验规则。
JSON Schema 主要运用在如下几点：
首先可视化编辑器需要做到板块的管理，这些板块支持可视化的编辑配置和效果展示，最终相互组装为一个页面。
每个板块我们不可避免的需要一个 View组件 来做展示，因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现，然后再通过一个拖动的容器来承载这些板块以及一些其它的数据配置。
如下图：
这样当我们在添加新的板块时，只需要开发一个 View组件 ，和书写一份 JSON Schema 来定义数据即可。
添加新的板块只需要在 config/tools.js 导入新增的板块，并且配置好工具栏即可，如：
新增板块文件结构如下：( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)
导出模块解释如下：
如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。
整个实现相对比较简单，感兴趣的可以花上两个小时看下源码，欢迎讨论提问。
vue的可视化页面编辑器
以上是关于Vue 前端可视化活动编辑器的主要内容，如果未能解决你的问题，请参考以下文章