总结低代码海报平台编辑器难点

上篇总结了基础的架构，本篇总结下细节方面的难点。

 这是目前编辑器页面的原型图。

不难看出和市面上大部分低代码平台一样，由三部分组成：左侧组件列表、中间画布区域、右侧属性区域。

大致操作流程就是拖动左侧的组件到中间的画布，选中组件，右侧属性面板就会展示与该组件关联的属性。编辑右侧属性，画布中对应的组件样式就会同步更新。页面拼接完成。

从中看出组件串联其中，在前面一篇文章中，我们大致分析了整体页面和组件的数据结构，但没有细化。抽取一下文字、图片、素材组件的通用特性：

• 尺寸属性（Size）
  • 宽度（width）
  • 高度（height）
• 填充属性（Padding）
  • 上填充（padding-top）
  • 右填充（padding-right）
  • 下填充（padding-bottom）
  • 左填充（padding-left）
• 视觉格式属性
  • 指定如何定位元素（position）
  • 指定所定位元素的上边缘的位置（top）
  • 指定所定位元素的右边缘的位置（right）
  • 指定所定位元素底边的位置（bottom）
  • 指定定位元素左边缘的位置（left）
  • 将一个或多个阴影应用于元素的框（box-shadow）
• 颜色属性（Color）
  • 透明度（opacity）
• 边框属性（Border）
  • 设置元素所有四个侧面的边框颜色（border-color）
  • 设置元素所有四个侧面的边框宽度（border-width）
  • 在元素的所有四个面上设置边框的样式（border-style）
  • 定义元素边界角的形状（border-radius）

除此之外，文字组件还具有以下属性：

• 字体属性(Fonts)
  • 定义元素的字体列表（font-family）
  • 定义文本的字体大小（font-size）
  • 定义文本的字体样式（font-style）
  • 指定文本的字体粗细（font-weight）
• 文字属性(Text)
  • 设置内联内容的水平对齐方式（text-align）
  • 指定添加到文本的装饰（text-decoration）
  • 设置文本行之间的高度（line-height）

图片组件还具有：

• 图片属性（Image）
  • 图片链接（src）

素材组件还具有：

• 背景属性(Background)
  • 定义元素的背景色（background-color）

我们将上面的操作流程拆解为三步：

1. 拖动左侧的组件到中间的画布
2. 选中组件，右侧属性面板就会展示与该组件关联的属性
3. 编辑右侧属性，画布中对应的组件样式就会同步更新

添加组件到画布

编辑器整体的数据结构是这么设计的

state:{ 
// 所有添加到画布中的组件数据 
components: [],
} 
 
mutations:{ 
// 添加组件到components 
addComponent(){}, 
// 编辑组件，更新components
updateComponent(){}, 
// 删除组件 
deleteComponent(){} 
}

那么从左侧组件列表添加组件到画布的操作其实就是向componentData中push一条组件数据。

这里主要是关注下组件列表要怎么设计：为了便于用户快速创建活动，组件列表最好是预设一些模板，其实就是针对文字、