优维低代码实践:自定义模板

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

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

《自定义模板》

一、概述

构件是我们的页面最基础的单元,不同构件的组合和搭配形成了页面的交互。当我们的不同页面想要复用相同的模块时。可复用性就是自定义模板诞生的背景,它可以将一套构件组合封装成一个新的可复用的单元,然后像普通构件那样使用。

二、模板的使用

2.1 代理的设置

模板的详情解析可查看「自定义模板详解」本篇着重讲解模板在我们我们低代码平台的使用, 我们的 visual-builder 平台有管理模板的专属页面,它跟我们编排的普通页面的界面是类似的,本质上都是组合不同构件。

模板也跟构件一样具有属性,方法,事件,插槽,不同的是它们只是代理其内部构件用的,模板只是起到封装的容器作用,我们具体看下模板代理的配置项,我们以小产品 「FIRST-APP-LESSON-4」中 「tpl-task-form」 为例子。

上面是一个添加任务表单项封装为一个模板的例子,我们能看到该模板代理了事件(events)和方法(methods),同样如果要代理属性和插槽的话配置如下所示:

复制代码
# 该示例为代理 form 中 values 属性和 form 中的 items 插槽
properties:  values: # 代理后的新属性名称    ref: form    refProperty: valuesslots:  items:  # 代理后的新插槽名称    ref: form    refSlot: items # 被代理的插槽
# 配置好后,该模板的就跟普通构件的使用方式一样,当添加 tpl-task-form 的构件后,该模板的属性和方法等就是上面定义的新属性和新方法        

2.2 State

state 为模板级别的数据变量,它跟 Context 上下文的数据一样,不同的是 context 类似我们的全局变量,作用域是整个路由,而 State 能控制在模板实例的作用域下,数据封装在模板内部、外部不可访问,同时一个模板的多个实例之间的数据互不影响。我们同样看下 「tpl-task-form」这个模板定义了哪些 state 数据:

我们再看这些变量对应的使用方式:

2.3 模板预览

我们开发模板也是支持实时预览的,面板的中间区域就是我们预览区,当我们需要调试时,我们可以根据模板的定义的 state 编辑不同的输入参数。

上面说完了模板的整个定义流程,我们再看下模板最终的使用效果,同样拿 「tpl-task-form」这个模板示例:

最终我们完成了模板的创建,定义和使用,掌握了模板这个技能,我们可以把很多复杂的场景简化为一个个小模块然后再组装,这对于降低开发复杂度是一个很好的助手。

相关推荐
2401_882727579 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
_xaboy2 天前
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程
vue.js·低代码·开源·动态表单·表单·formcreate·低代码表单
_xaboy3 天前
在开源的form-create-designer 表单设计器中扩展自定义操作教程
vue.js·低代码·开源·formcreate·可视化表单设计器·fc-designer
by————组态3 天前
Web组态可视化编辑器 快速绘制组态
前端·网络·物联网·低代码·编辑器·组态
低代码布道师4 天前
微搭低代码入门05循环
低代码
小麦项目管理指南4 天前
如何通过低代码逻辑编排实现业务流程自动化?
运维·低代码·自动化·源代码管理
_xaboy4 天前
利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构
vue.js·低代码·开源·动态表单·formcreate·低代码表单·可视化表单设计器
Light604 天前
AI 驱动低代码平台:开创智能化用户体验新纪元
人工智能·低代码
jonyleek6 天前
商业智能BI如何零编码对接低代码数据模型?
数据库·低代码·信息可视化·数据分析·数据可视化·软件需求