(19)国家知识产权局 (12)发明 专利 (10)授权公告 号 (45)授权公告日 (21)申请 号 202210777375.3 (22)申请日 2022.07.04 (65)同一申请的已公布的文献号 申请公布号 CN 114840203 A (43)申请公布日 2022.08.02 (73)专利权人 金现代信息产业股份有限公司 地址 250000 山东省济南市高新区新 泺大 街1166号奥盛大厦2号楼21层东区 2101 (72)发明人 黎峰　胡杨　杜伟　张传慧　陈彬　 石瑞东　冯雪芹　 (74)专利代理 机构 济南圣达知识产权代理有限 公司 372 21 专利代理师 黄海丽(51)Int.Cl. G06F 8/38(2018.01) G06F 9/451(2018.01) (56)对比文件 CN 10196 3987 A,201 1.02.02 CN 1049328 89 A,2015.09.23 CN 109697254 A,2019.04.3 0 CN 102662966 A,2012.09.12 CN 109101 150 A,2018.12.28 CN 104461484 A,2015.0 3.25 CN 110717120 A,2020.01.21 CN 114020252 A,202 2.02.08 CN 108874373 A,2018.1 1.23 审查员 文燕 (54)发明名称 页面元素的动态创建方法及系统 (57)摘要 本发明涉及电数字数据处理技术领域， 本发 明公开了页面元素的动态创建方法及系统， 包 括： 获取待插入的页面元素以及所述页面元素待 插入的位置； 根据所述页面元素待插入的位置， 调用对应的工具函数， 以实现所述页面元素插入 到整体页面中； 将页面元素视为子组件， 将整体 页面视为父 组件； 子组件将自身的参数传递给父 组件； 父组件将自身的参数传递给子组件； 对整 体页面进行渲染。 减少用户手写代码的工作量， 基于低代码开发平台+页面DOM元素扩展快速相 应用户需求。 权利要求书2页 说明书4页 附图1页 CN 114840203 B 2022.09.16 CN 114840203 B 1.页面元 素的动态创建方法， 其特 征是， 包括： 获取待插 入的页面元 素以及所述页面元 素待插入的位置； 根据所述页面元素待插入的位置， 调用对应的工具函数， 以实现所述页面元素插入到 整体页面中； 其中， 根据所述页面元素待插入的位置， 调用对应的工具函数， 以实现所述页面元素插 入到整体页面中； 具体包括： 如果所述页面元素待插入位置为目标文档对象模型元素内部， 并作为目标文档对象模 型元素的第一个文档对象模型元素； 则判断目标文档对象模型元素是否存在子文档对象模 型列表， 如果存在子文档对象模型列表， 就使用超文本标记语言提供的insertBefore方式 进行操作， 将待插入的页面元素插入到子文档对象模型列表的第一个子文档对象模型前 面； 如果不存在子文档对象模 型列表， 就使用超文本标记语 言提供的appenChild方式， 将待 插入的页面元 素插入到目标文档对象模型 元素内部； 如果所述页面元素待插入位置为目标文档对象模型元素内部， 并作为目标文档对象模 型元素的最后一个文档对象模型元素； 则使用超文本标记语言提供的appenChild方式， 将 待插入的页面元 素插入到目标文档对象模型 元素内部； 如果所述页面元素待插入位置为目标文档对象模型元素的前方， 且待插入的页面元素 的文档对象模型层级与目标文档对象模型元素的文档对象模型层级一致； 则使用超文本标 记语言提供的insertBefore方式进行操作， 将待插入的页面元素插入到目标文档对象模 型 元素的前方； 如果所述页面元素待插入位置为目标文档对象模型元素的后方， 且待插入的页面元素 的文档对象模型层级与目标文档对象模型元素的文档对象模型层级一致； 则判断目标文档 对象模型 元素是否有下一个同级的文档对象模型 元素； 如果有， 则使用超文本标记语言提供的insertBefore方式进行操作， 将待插入的页面 元素插入到下一个文档对象模型 元素之前； 如果没有， 则使用超文本标记语言提供的appenChild方式， 将待插入的页面元素插入 到目标文档对象模型 元素的父文档对象模型 元素中作为 最后一个文档对象模型 元素； 将页面元素视为子组件， 将整体页面视为父组件； 子组件将自身的参数传递给父组件； 父组件将自身的参数传递给子组件； 所述子组件将自身的参数传递给父组件； 具体包括： 根据业务场景， 将子组件数据传递 给父组件； 所述父组件将自身的参数传递给子组件； 具体包括： 创建子组件时， 如果子组件从父组件获取到的值是明确值， 并且子组件从父组件获取 到的值不再改变， 父组件调用工具函数时， 以pr opsData形式将 子组件需要的数据传入到实 例中， 在子组件内以props形式获取propsData传入的变量的值； 反之， 创建子组件时， 如果子组件从父组件获取到值不是明确值， 或者根据使用业务场 景的不同， 子组件从父组件获取到值是改变的， 则将 变量定义在子组件data内， 定义一个变 量将调用工具函数的返回值组件实例进行存 储， 获取子组件 对应的数据， 并且赋值改变； 调用工具函数时， 参数包括子组件数据、 插入位置、 传递参数、 监听事件以及监听事件 触发时需要 执行的方法； 通过js提供的call方法确保工具函数的执行环 境是当前要插入的权　利　要　求　书 1/2 页 2 CN 114840203 B 2vue页面， 确保组件 插入到指定页面的指定位置； 低代码开发平台每个组件都有ref属性， 通过$ref属性获取插入的指定位置， 在要插入 的位置放入低代码开发平台提供 的区域组件， 以此确保插入子组件的位置和大小， 控制插 入子组件的显示样式； 对整体页面进行渲染。 2.采用如权利要求1所述的页面元素的动态创建方法的页面元素的动态创建系统， 其 特征是， 包括： 获取模块， 其被 配置为： 获取待插 入的页面元 素以及所述页面元 素待插入的位置； 函数调用模块， 其被配置为： 根据所述页面元素待插入的位置， 调用对应的工具函数， 以实现所述页面元 素插入到整体页面中； 参数传递模块， 其被配置为： 将页面元素视为子组件， 将整体页面视为父组件； 子组件 将自身的参数传递给 父组件； 父组件将自身的参数传递给子组件； 渲染模块， 其被 配置为： 对整体页面进行渲染。权　利　要　求　书 2/2 页 3 CN 114840203 B 3