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

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


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

《添加构件》

一、概述

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

二、构件的添加

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

1.从组件库添加构件

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

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

2.从构件树添加构件

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

添加通用构件:

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

添加原子构件:

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

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

相关推荐
腾讯云云开发18 小时前
预约+会员+营销全功能覆盖,1 小时上架美业小程序
低代码·微信小程序·小程序·云开发
canonical_entropy2 天前
Nop平台架构白皮书:一个基于广义可逆计算理论的软件构造体系评估
后端·低代码·领域驱动设计
jnpfsoft3 天前
低代码视图真分页实操:API/SQL 接口配置 + 查询字段避坑,数据加载不卡顿
前端·低代码
NocoBase3 天前
华数传媒用 NocoBase 快速搭建 AI 多模态研发平台
人工智能·低代码·开源
xhload3d3 天前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
踩着两条虫3 天前
VTJ.PRO低代码快速入门指南
前端·低代码
赵大碗4 天前
Joker 智能开发平台-组件开发
低代码
NocoBase4 天前
11 个在 GitHub 上最受欢迎的开源无代码 AI 工具
低代码·ai·开源·github·无代码·ai agent·airtable·内部工具·app builder