从零实现一个可视化编辑器 - 组件设计

可视化编辑器比较多的使用在 电商营销活动编辑H5可视化编辑电商店铺装修 等场景中。

最近做店铺装修,也实现了一个简单的可视化编辑,这里记录下整个编辑器页面的组件设计。

活动编辑器预览地址:https://form.lljj.me/vue-editor.html#/editor
其中数据配置表单根据 JsonSchema 生成,可参见:https://github.com/lljj-x/vue-json-schema-form

页面结构

组件结构

可用组件配置

可拖动编辑器

form配置

视图组件

组件数据流