通过上一篇文章,我们对乔巴乐高海报平台的整体架构有了初步的了解。今天我们深入到编辑器部分,对其中的难点和实现细节进行分析。
这是目前生产的编辑器页面:
不难看出和市面上大部分低代码平台一样,由三部分组成:左侧组件列表、中间画布区域、右侧属性区域。
大致操作流程就是拖动左侧的组件到中间的画布,选中组件,右侧属性面板就会展示与该组件关联的属性。编辑右侧属性,画布中对应的组件样式就会同步更新。页面拼接完成。
从中看出组件串联其中,在前面一篇文章中,我们大致分析了整体页面和组件的数据结构,但没有细化。抽取一下文字、图片、素材组件的通用特性:
尺寸属性(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:{
// 所有添加到画布中的组件数据
componentData:[],
}
reducers:{
// 添加组件到componentData
addComponentData(){},
// 编辑组件,更新componentData及curComponent
editComponentData(){},
// 删除组件
delComponentData(){}
}
那么从左侧组件列表添加组件到画布的操作其实就是向componentData中push一条组件数据。
这里主要是关注下组件列表要怎么设计:为了便于用户快速创建活动,组件列表最好是预设一些模板,其实就是针对文字、图片和素材分别提供一些已有的元素。这样当对应组件点击添加到画布时,对应就会commit一个mutation来修改store中的componentData。
参考文章
发表评论