优维低代码实践：添加构件

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

---

优维低代码实践连载第11期

《添加构件》

▽

一、概述

页面是不同的构件基于一定的业务逻辑和交互形成的。构件作为页面中最基础的元素，分为原子构件、通用构件、业务构件、模板（可复用的具有一定业务逻辑的多个构件封装而成）等。

二、构件的添加

构件的添加要基于路由，即构件的添加的前提是要有一个路由页面，此处省略添加路由的介绍，具体可参考路由创建。

1.从组件库添加构件

组件库中涵盖了平台中拥有的所有构件，通过对组件库中的构件进行模糊搜索，可以查找匹配的构件；找到构件后，可以通过鼠标拖拽构件的方式，将构件拖拽到屏幕中间的iframe预览区域，iframe预览区域可以快速接收构件信息并渲染效果。

ps: 拖拽构件至iframe预览区域，需保持检查开关为开启状态。

 

 

 

 

 2.从构件树添加构件

从构件树添加构件只能通过构件Id进行模糊搜索，因此更适合对构件id熟悉的用户。从构件树添加构件也更适用于不适合拖拽构件的场景，比如要拖拽至某些复杂的场景中，不便于寻找构件摆放位置；或者是添加某些在组件库中没有的原子构件，如div、a标签等。

添加通用构件：

 

 ps: 父构件的插槽位有哪些，可以点击父构件的说明文档进行查阅，不同的构件插槽位名称不同，位置不同；非容器类构件没有插槽位。

 添加原子构件：

原子构件即原生的HTML元素，如div、a、span等。

 

 至此，构件的添加完成啦。