基于VUE的过滤栏适配方法、系统、装置和可读存储介质制造方法及图纸

本发明专利技术公开一种基于VUE的过滤栏适配方法、系统、装置和可读存储介质，方法包括，在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素；其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素。本发明专利技术满足容器内元素的样式布局适配；提高操作体验；监听尺寸栏的尺寸变化，将多余行隐藏。将多余行隐藏。将多余行隐藏。

【技术实现步骤摘要】
基于VUE的过滤栏适配方法、系统、装置和可读存储介质


[0001]本专利技术涉及网页的前端展示技术，具体涉及一种基于VUE的过滤栏适配方法、系统、装置和可读存储介质。

技术介绍

[0002]在网页的前端展示界面中，因设备分辨率不同、界面交互或者浏览器窗口大小不一等因素会影响页面的布局。为了保证页面美观及交互的合理性，一些页面元素需要根据不同的页面尺寸适配合适的布局方案。过滤栏是页面布局中常用的可适配元素。如何根据界面交互或者浏览器窗口改变而自适应匹配合适的过滤栏布局是前端开发者经常需要思考的问题。
[0003]现有的前端适配方案有以下几种方案：
[0004](1)固定元素尺寸，不允许缩放，页面最外层出发滚动条延申。此种方法能够保证页面尺寸改变时整体样式布局稳定，但是会使显示内容第一时间缺失，不易交互，从而影响用户体验。
[0005](2)使用flex弹性布局。关键元素高宽和位置都不变，只有容器元素在做伸缩变换。此方案聚焦于容器内部子元素的适配布局。
[0006](3)使用百分比加媒体查询。创建和编辑页面布局的CSS，在需要切换的尺寸设置切换节点，另写一份样式布局。
[0007](4)使用CSS自适应布局单位vw,vh，根据视口尺寸适配。
[0008]现有的过滤栏前端适配方案大多都是根据上述4种方案实现的。但是，大部分适配方案仅仅适配了子元素的换行布局，对于过滤栏内子元素过多时高度较大的情况未作处理。另外，现有方案将交互按钮部分与搜索项部分放在同一容器中布局，不够美观，且当子元素超出一行时操作体验较差。
[0009]经检索发现，公开号CN110069257A的中国专利于2019年7月30日公开了一种界面处理方法、装置及终端，其中的方法包括：获取前端界面的设计文件，所述设计文件包括所述前端界面中的元素的图层数据结构及位置信息；根据所述设计文件获取所述前端界面布局所需的控件信息，所述控件信息包括控件的属性及控件之间的关系；按照所述控件信息生成所述前端界面的通用布局文件；将所述前端界面的通用布局文件转换为目标平台的目标布局文件，提高了前端界面的开发效率。
[0010]但是，该专利并没有考虑到前端界面中布局的子元素过多时，导致前端界面的高度较大的情况，因此，现有技术中存在的过滤栏高度适配及子元素布局适配问题仍然是本领域技术人员亟待解决的问题。

技术实现思路

[0011]为克服上述现有技术的不足，本专利技术提供一种基于VUE的过滤栏适配方法、系统、装置和可读存储介质，可以根据不同的尺寸场景适配相应尺寸的过滤栏，同时保证过滤栏
内部子元素布局适配。另外，若子元素排列超出一行，作隐藏处理，通过收缩展开按钮对过滤栏高度管理。
[0012]本专利技术一方面提供一种基于VUE的过滤栏适配方法，包括，在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素；其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素。
[0013]上述技术方案中，将搜索项目部分及交互按钮部分独立布局，满足容器内元素的样式布局适配；根据过滤栏的尺寸变化适配样式布局，提高操作体验；监听尺寸栏的尺寸变化，判断元素是否超过一行，当元素超过一行时，只显示第一行，将多余行隐藏。
[0014]优选地，所述最小宽度能够容纳至少一个搜索项目元素。
[0015]具体地，使用媒体查询设置最小宽度切换节点，设置能够放下至少一个搜索项目元素的最小宽度。
[0016]具体地，当过滤栏宽度大于最小宽度时，将搜索项目部分与交互按钮部分在一行内左右布局，搜索项目部分使用flex布局，搜索项目部分的宽度使用flex弹性盒子自动适配；按钮部分使用固定像素设置最小宽度。
[0017]具体地，当过滤栏宽度为最小宽度时，将搜索项目部分与交互按钮部分顺序排列布局，均使用flex布局。
[0018]优选地，监听过滤栏的尺寸变化的步骤进一步包括：通过ref给过滤栏父级容器、过滤栏搜索项目部分的父级容器、交互按钮部分的父级容器注册引用信息；在监听到事件后，通过$ref对象获取过滤栏父级容器对应的DOM元素，定义为DOM1、获取过滤栏搜索项目部分的父级容器对应的DOM元素，定义为DOM2、获取交互按钮部分的父级容器对应的DOM元素，定义为DOM3。
[0019]具体地，监听过滤栏尺寸变化包括在页面初次加载、过滤栏父级容器大小改变、点击展开收起按钮等情况下监听。
[0020]优选地，在过滤栏宽度大于最小宽度时，判断DOM2中各个搜索项目元素的宽度及各元素间的间距之和，是否大于DOM2的宽度，若大于，则确定过滤栏内元素超过一行。
[0021]具体地，通过计算得到DOM2中各个搜索项目元素的宽度及各元素间的间距。
[0022]优选地，在过滤栏宽度为最小宽度时，判断DOM2的宽度与DOM3的宽度之和是否大于DOM1的宽度，若大于，则确定过滤栏内元素超过一行。
[0023]具体地，当媒体查询触发最小宽度切换节点时，由于搜索项部分与按钮项部分为两行布局，对DOM2的宽度与DOM3的宽度之和是否大于DOM1的宽度进行判断。
[0024]优选地，设计展开/收起按钮，将所述展开/收起按钮定位于过滤栏的一侧，并对展开/收起按钮动态绑定布尔值showMore，以控制展开/收起按钮显示或隐藏。
[0025]具体地，将布尔值showMore设置为true时，显示展开/收起按钮。
[0026]优选地，若判断过滤栏内元素超过一行，则将DOM1的高度限制为一行的高度，同时将展开/收起按钮的布尔值showMore设置为true，显示展开/收起按钮，并将展开/收起按钮切换为展开按钮。
[0027]具体地，在过滤栏宽度大于最小宽度时，隐藏超过一行的搜索项目部分的元素，保证交互按钮部分的元素能够始终显示出来。
[0028]具体地，在过滤栏宽度为最小宽度时，将搜索项目部分与交互按钮部分上下布局。只显示第一行，第二行隐藏，通过展开/收起按钮进行管理。
[0029]具体地，若要将多余子元素隐藏，则将展开/收起按钮切换为展开按钮时，将图标更换为展开图标，将DOM1的高度限制为一行的高度。
[0030]具体地，若要显示过滤栏所有元素，则将展开按钮切换为收起按钮，将图标更换为收起图标，取消对DOM1的高度限制。
[0031]本专利技术另一方面提供一种基于VUE的过滤栏适配系统，用于实现所述基于本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于VUE的过滤栏适配方法，其特征在于，包括，在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素；其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素。2.根据权利要求1所述的基于VUE的过滤栏适配方法，其特征在于，所述最小宽度能够容纳至少一个搜索项目元素。3.根据权利要求1所述的基于VUE的过滤栏适配方法，其特征在于，监听过滤栏的尺寸变化的步骤进一步包括：通过ref给过滤栏父级容器、过滤栏搜索项目部分的父级容器、交互按钮部分的父级容器注册引用信息；在监听到事件后，通过$ref对象获取过滤栏父级容器对应的DOM元素，定义为DOM1、获取过滤栏搜索项目部分的父级容器对应的DOM元素，定义为DOM2、获取交互按钮部分的父级容器对应的DOM元素，定义为DOM3。4.根据权利要求1所述的基于VUE的过滤栏适配方法，其特征在于，在过滤栏宽度大于最小宽度时，判断DOM2中各个搜索项目元素的宽度及各元素间的间距之和，是否大于DOM2的宽度，若大于，则确定过滤栏内元素超过一行。5.根据权利要求1所述的基于VUE的过滤栏适配方法，其特征在于，在过滤栏宽度为最小宽度时，判断DOM2的宽度与DOM3的宽度之和是否大于DOM1的宽度，...

【专利技术属性】
技术研发人员：卢卅，刘坤，张启亮，黄凯，
申请(专利权)人：徐工汉云技术股份有限公司，
类型：发明
国别省市：