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

发表于

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

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

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

页面结构

组件结构

可用组件配置

可拖动编辑器

form配置

视图组件

组件数据流