优维低代码:构件 slot 说明

优维低代码:构件 slot 说明

优维低代码:构件 slot 说明

导语

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

在上一篇《优维低代码:构件事件传递》的技术分享中,我们分享了构件间传递事件常见的业务场景,以及分布调用的方式。下面,我们来讲讲有关容器构件的slot机制。

{
 "brick": "basic-bricks.micro-view",
 "injectDeep": true,
 "slots": {
 "titleBar": {
 "type": "bricks",
 "bricks": [
 {
 "brick": "basic-bricks.page-title",
 "injectDeep": true,
 "properties": {
 "pageTitle": "APP 管理"
 }
 }
 ]
 },
 "content": {
 "type": "bricks",
 "bricks": [
 ...
 ]
 }
 }
}

有些容器构件是提供了 slot 机制的,也即是构件的插槽。插槽的意思是这个构件提供了子构件插入的能力,但插入点的位置会由父构件决定,插槽点用名称来表示。比如 basic-bricks.micro-view 就提供了 3 个插槽:titleBar、toolbar、content,表示左上角标题位置,右上角工具栏位置,内容位置,具体可查看说明文档。

如下为 basic-bricks.micro-view 的插槽示意图:

优维低代码:构件 slot 说明

# div 也有 slot

{
 "brick": "div",
 "slots": {
 "": {
 "type": "routes",
 "routes": [
 ...
 ]
 }
 }
}

大伙在 demo 示例中会看到有不少上述写法,也会有疑问:

• div 为啥可以有 slots
• slot 的 key 为啥可以是 ""

解释:其实任何构件都可以有 slot ,如果 slot 名字在构件中找不到定义的话,框架也一样会渲染,按 html 流式布局(从左往右从上往下)排布。因为之前我们 storyboard 编排时候不支持“路由直接嵌套子路由”,所以为了一些代码的复用(比如 sidebar)和路由层级更好,故会特意新增一个 div 的层级,而 slot 一般就写成了 ""

另外:“路由直接嵌套子路由”在新的版本支持了,具体见:RouteConf

{
 "path": "/xxx",
 "type": "routes",
 "routes": [
 {
 "path": "/xxxx/a",
 "bricks": []
 },
 {
 "path": "/xxxx/b",
 "bricks": []
 }
 ]
}

以上就是今天关于优维低代码的分享,希望对你有所收获!

• 编辑
• 预览