优维低代码:构件 slot 说明

EASYOPS_youwei · · 538 次点击 · · 开始浏览    

优维低代码:构件 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": []
    }
  ]
}

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


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

538 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传