(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210603414.8 (22)申请日 2022.05.30 (71)申请人 平安科技 （深圳） 有限公司 地址 518000 广东省深圳市福田区福田街 道福安社区益田路5033号平 安金融中 心23楼 (72)发明人 汤世昭　 (74)专利代理 机构 深圳国新 南方知识产权代理 有限公司 4 4374 专利代理师 张曾明 (51)Int.Cl. G06F 9/451(2018.01) G06F 9/455(2006.01) (54)发明名称 前端页面容器化布局方法、 装置、 计算机设 备及存储介质 (57)摘要 本发明公开了一种前端页面容器化布局方 法、 装置、 计算机设备及存储介质。 方法包括： 采 用Vue技术将页面布局场景抽象为一种容器， 容 器内部的元素组件的位置以及尺寸与页面布局 场景中的元素组件相对应； 基于容器的结构， 按 照从外向内的原则对页面骨架进行水平分栏 以 及垂直分栏， 生成设定数量的沿水平方向排列的 水平分栏单元以及沿垂直方向排列的垂直分栏 单元； 根据页面布局场景将容器内的元素组件分 别嵌入对应的水平分栏单元以及垂直分栏单元 中， 并拉伸被嵌入的元素组件的宽度和高度， 使 得被嵌入的元素组件填满对应的水平分栏单元 或垂直分栏单元。 本发明能让开发人员集中精力 组织页面元素、 聚焦更小的区域进行精细化布 局。 权利要求书2页 说明书13页 附图4页 CN 114968461 A 2022.08.30 CN 114968461 A 1.一种前端页面 容器化布局方法， 其特 征在于， 包括： 采用Vue技术将页面布局场景抽象为一种容器， 所述容器内部的元素组件的位置以及 尺寸与所述页面布局场景中的元素组件相对应， 且所述容器内部的元素组件遵循绝对布局 的约束； 基于所述容器的结构， 按照从外向内的原则对页面骨架进行水平分栏以及垂直分栏， 生成设定数量的沿水平方向排列的水平分栏单 元以及沿垂直方向排列的垂直分栏单 元； 根据页面布局场景将所述容器内的元素组件分别嵌入对应的水平分栏单元以及垂直 分栏单元中， 并拉伸被嵌入的元素组件的宽度和高度， 使得所述被嵌入的元素组件填满对 应的水平分栏单 元或垂直分栏单 元。 2.根据权利要求1所述的前端页面容器化布局方法， 其特征在于， 所述采用Vue技术将 页面布局场景抽象为 一种容器包括： 根据页面布局场景封装容器Container， 并设置position属性； 其中， 所述position属 性设置为relative， 用于指定一个元 素组件在页面中的定位方式； 封装所述容器内部的元素组件ContainerItem， 并采用vue ‑draggable ‑resizable插件 进行元素组件的位置拖拽以及尺寸调节； 定义递归的JSON数据格式； 根据所述JSON数据格式递归所述 容器内部的元 素组件。 3.根据权利要求2所述的前端页面容器化布局方法， 其特征在于， 所述容器内部的每个 元素组件分别包括各自的属性信息， 所述属性信息包括X坐标、 Y坐标、 宽度以及高度， 根据 所述属性信息定位每个元素组件在容器中的位置及尺寸； 且所述容器内先嵌入的元素组件 的层级低， 后嵌入的元素组件的层级高， 如果 嵌入的两个元素组件重叠， 则后嵌入的元素 组 件覆盖先嵌入的元 素组件。 4.根据权利要求1至3任一项所述的前端页面容器化布局方法， 其特征在于， 所述按照 从外向内的原则对页面骨架进 行水平分栏以及垂 直分栏， 生成设定数量的沿水平方向排列 的水平分栏单 元以及沿垂直方向排列的垂直分栏单 元具体为： 依据Element ‑UI的el‑row组件对所述页面骨架进行 水平分栏以及垂直分栏。 5.根据权利要求4所述的前端页面容器化布局方法， 其特征在于， 所述每个水平分栏单 元的高度均等于水平分栏的总高度， 宽度为设定的占水平分栏总宽度的百分比； 所述每个 垂直分栏单 元的宽度等于垂直分栏的总宽度， 高度为设定的占垂直分栏总高度的百分比。 6.根据权利要求5所述的前端页面容器化布局方法， 其特征在于， 所述根据页面布局场 景将所述 容器内的元 素组件分别嵌入 对应的水平分栏单 元以及垂直分栏单 元中具体为： 所述每个水平分栏单 元或垂直分栏单 元中只能嵌入一个元 素组件； 如果新增一个未嵌入元素组件的水平分栏单元或垂直分栏单元， 则指定元素组件进行 嵌入； 如果删除一个已嵌入元素组件的水平分栏单元或垂直分栏单元， 则将所述水平分栏单 元或垂直分栏单 元内嵌入的元 素组件一并删除。 7.根据权利要求1所述的前端页面容器化布局方法， 其特征在于， 所述采用Vue技术将 页面布局场景抽象为 一种容器还 包括： 根据所述页面布局场景配置堆叠容器， 所述堆叠容器用于图层堆叠后出现 “叠层”效果权　利　要　求　书 1/2 页 2 CN 114968461 A 2的页面布局场景， 所有堆叠单元在所述堆叠容器中沿Z轴 方向依次排列， 且Z数值越高的堆 叠单元的层级越高， 所述层级高的堆叠单元覆盖层级低的堆叠单元， 每个堆叠单元只能嵌 入一个元 素组件， 且被嵌入的元 素组件需填满整个堆叠单 元。 8.一种前端页面 容器化布局装置， 其特 征在于， 包括： 页面抽象模块： 用于采用Vue技术将页面布局场景抽象为一种容器， 所述容器 内部的元 素组件的位置以及尺 寸与所述页面布局 场景中的元素组件相对应， 且所述容器内部的元素 组件遵循绝对布局的约束； 页面拆分模块： 用于基于所述容器的结构， 按照从外向内的原则对页面骨架进行水平 分栏以及垂 直分栏， 生成设定数量的沿水平 方向排列的水平分栏单元以及沿垂 直方向排列 的垂直分栏单 元； 页面布局模块： 用于根据页面布局场景将所述容器 内的元素组件分别嵌入对应的水平 分栏单元以及垂直分栏单元中， 并拉伸被嵌入的元素组件的宽度和高度， 使得所述被嵌入 的元素组件填满 对应的水平分栏单 元或垂直分栏单 元。 9.一种计算机设备， 其特 征在于， 所述计算机设备包括： 存储有可执行程序代码的存 储器； 与所述存 储器连接的处 理器； 所述处理器用于调用所述存 储器中存 储的所述可 执行程序代码， 并执 行以下步骤： 采用Vue技术将页面布局场景抽象为一种容器， 所述容器内部的元素组件的位置以及 尺寸与所述页面布局场景中的元素组件相对应， 且所述容器内部的元素组件遵循绝对布局 的约束； 基于所述容器的结构， 按照从外向内的原则对页面骨架进行水平分栏以及垂直分栏， 生成设定数量的沿水平方向排列的水平分栏单 元以及沿垂直方向排列的垂直分栏单 元； 根据页面布局场景将所述容器内的元素组件分别嵌入对应的水平分栏单元以及垂直 分栏单元中， 并拉伸被嵌入的元素组件的宽度和高度， 使得所述被嵌入的元素组件填满对 应的水平分栏单 元或垂直分栏单 元。 10.一种存储介质， 其特征在于， 存储有处理器可运行的程序文件， 所述程序文件用于 执行以下步骤： 采用Vue技术将页面布局场景抽象为一种容器， 所述容器内部的元素组件的位置以及 尺寸与所述页面布局场景中的元素组件相对应， 且所述容器内部的元素组件遵循绝对布局 的约束； 基于所述容器的结构， 按照从外向内的原则对页面骨架进行水平分栏以及垂直分栏， 生成设定数量的沿水平方向排列的水平分栏单 元以及沿垂直方向排列的垂直分栏单 元； 根据页面布局场景将所述容器内的元素组件分别嵌入对应的水平分栏单元以及垂直 分栏单元中， 并拉伸被嵌入的元素组件的宽度和高度， 使得所述被嵌入的元素组件填满对 应的水平分栏单 元或垂直分栏单 元。权　利　要　求　书 2/2 页 3 CN 114968461 A 3