低代码: 编辑器核心功能实现

概述

• 编辑器页面主要有三个部分，为左中右结构
  • 左侧为组件模版库，中间为画布，右侧是设置面板
  • 和后端相关的暂不讨论 - 预览 发布 等
• 左侧是预设各种组件模版并进行添加
• 中间是使用交互的手段更新元素的值
• 右侧是使用表单的手段更新元素的值

• 也就是说，左边是预置的组件列表，可以点击或拖动进入中间的画布
• 中间的画布，就是编辑器的核心，可以进行交互，元素可以拖动，选中
• 在中间的画布选中一个元素，当前元素就会高亮，右侧对应该元素的属性等都会出现来方便做元素的调整
• 右侧属性面板改变后会立刻同步到中间画布中，让元素的状态进行一个改变

编辑器的状态设计

• 我们需要设计一个数据控制中心来让管理页面上的数据变化和交互
• 在这里，比如我们使用vue框架，就需要来设计一个 vue store 来进行管理
• store/editor.ts 关键代码