业务组件分为:样式属性和其他属性,样式属性就是css,其他属性拿文本来说,就是比如test还有点击事件等。
有两种方案:
方案一:把css作为统一的对象传入:
<LText css={{color: 'fff'}} text="nihao"/>
<p style={props.css}></p>
方案二:将所有的属性全部平铺传入
<LText text="hello" color="#fff" />
const styles = stylePick(props)
<p style={style}></p>
// 对于一些公用属性,比如 L-text和l-image都有一个页面跳转的公共行为,
// 在组件中我们要抽离出公共的函数
import useClick from 'useCLick'
useClick(props)
这两种方案,第二种方案相比于第一种比较好,第一种使用内部实现简单,但是保存的时候需要多保存一层结构,后端可能也需要多保存一层结构,并且我们在更新数据的时候还要区分css属性还是其他属性,做一个区分,方案二内部实现比较复杂一些,但是保存的时候比较好保存,我们平铺就可以进行保存,在更新数据的时候也不需要甄别。
分为三个部分,左侧是业务组件的模板库:文本,图片,形状,中间是画布,可以对元素进行一些修改,右侧是设置面板
编辑器是围绕着画布进行一系列的操作。元素抽象成一个拥有特定结构的数组。如何将画布上面选中的元素,映射到右侧面板中的属性设置,并且进行更新是一个比较复杂的事情:
// 整个编辑器使用一个store来实现具体功能,总体设计如下
export interface EditorProps {
// 供中间编辑器渲染的数组
components: ComponentData[];
// 当前编辑的是哪个元素,uuid
currentElement: string;
// 当然最后保存的时候还有有一些项目信息,这里并没有写出,等做到的时候再补充
}
export interface ComponentData {
// 这个元素的 属性,属性请详见下面
props: {[key: string]: any};
// id,uuid v4 生成
id: string;
// 业务组件库名称 l-text,l-image 等等
name: string;
}
// 渲染画布:
const compoents = [
{ id: '1', type: 'l-text', props: {text: 'hello', color: 'green'}},
{ id: '2', type: 'l-text', props: {text: 'hello2', color: 'purple'}},
]
compoents.map(componet => <compoent.name {...props} />)
// 渲染左侧模板
compoents.map(componet => <wrap><compoent.name {...props} /></wrap>)
// 添加删除元素
// 添加元素,在左侧模板,直接在 components中添加元素,
compoents.push({ id: '3', type: 'l-text', props: {text: 'hello2', color: 'purple'}},)
// 属性元素,在画布里面执行删除事件
components = components.filter(compoent => compoent.id !== id)
// 将选中的值渲染到右侧画布中去:
const currentCompoentProps = {
text: '123',
color: '#fff',
imgUrl: ''
}
将选中的元素currentCompoentProps
映射到右侧面板设置中的属性设置中有以下方案:
- 方案一:
// 伪代码,最终产生的效果是这样的:
<input value={text} />
<color-picker value={color} />
<img url={imgUrl}/>
// 这样写的话,有以下一些缺点:
1. 比较冗长,如果有100个不同的属性,后面可能要写100个不同的组件,
2. 不同类型的业务组件都要做不同的判断
if type === 'text'
<input value={text} />
<color-picker value={color} />
else if type === 'image'
3. 可扩展性比较差。
如果我们后面添加新的业务组件,就要写更多的if else
- 另一个实现方案:界面的UI,就是数据的抽象,所以我们自然想到的就是使用特定的数据结构将他渲染成就界面。
const textComponentProps = {
text: 'hello',
fontFamily: 'Heiti',
color: '#fff'
}
const propsMap = {
text: {
component: 'input'
},
fontFamily: {
component: 'dropdown'
},
color: {
component: 'color-picker'
}
}
map(textComponentProps, (key, value) => {
const hanldeChange = (propKey, newValue, id) => {
const updateComponent = store.components.find(component.id === id)
updateComponent.props[propKey] = newValue
}
<propsMap[key].component value={value} @change={hanldeChange}/>
})