基于VUE的过滤栏适配方法、系统、装置和可读存储介质与流程

基于vue的过滤栏适配方法、系统、装置和可读存储介质
技术领域
1.本发明涉及网页的前端展示技术，具体涉及一种基于vue的过滤栏适配方法、系统、装置和可读存储介质。


背景技术：

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


技术实现要素：

11.为克服上述现有技术的不足，本发明提供一种基于vue的过滤栏适配方法、系统、装置和可读存储介质，可以根据不同的尺寸场景适配相应尺寸的过滤栏，同时保证过滤栏
内部子元素布局适配。另外，若子元素排列超出一行，作隐藏处理，通过收缩展开按钮对过滤栏高度管理。
12.本发明一方面提供一种基于vue的过滤栏适配方法，包括，在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素；其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素。
13.上述技术方案中，将搜索项目部分及交互按钮部分独立布局，满足容器内元素的样式布局适配；根据过滤栏的尺寸变化适配样式布局，提高操作体验；监听尺寸栏的尺寸变化，判断元素是否超过一行，当元素超过一行时，只显示第一行，将多余行隐藏。
14.优选地，所述最小宽度能够容纳至少一个搜索项目元素。
15.具体地，使用媒体查询设置最小宽度切换节点，设置能够放下至少一个搜索项目元素的最小宽度。
16.具体地，当过滤栏宽度大于最小宽度时，将搜索项目部分与交互按钮部分在一行内左右布局，搜索项目部分使用flex布局，搜索项目部分的宽度使用flex弹性盒子自动适配；按钮部分使用固定像素设置最小宽度。
17.具体地，当过滤栏宽度为最小宽度时，将搜索项目部分与交互按钮部分顺序排列布局，均使用flex布局。
18.优选地，监听过滤栏的尺寸变化的步骤进一步包括：通过ref给过滤栏父级容器、过滤栏搜索项目部分的父级容器、交互按钮部分的父级容器注册引用信息；在监听到事件后，通过$ref对象获取过滤栏父级容器对应的dom元素，定义为dom1、获取过滤栏搜索项目部分的父级容器对应的dom元素，定义为dom2、获取交互按钮部分的父级容器对应的dom元素，定义为dom3。
19.具体地，监听过滤栏尺寸变化包括在页面初次加载、过滤栏父级容器大小改变、点击展开收起按钮等情况下监听。
20.优选地，在过滤栏宽度大于最小宽度时，判断dom2中各个搜索项目元素的宽度及各元素间的间距之和，是否大于dom2的宽度，若大于，则确定过滤栏内元素超过一行。
21.具体地，通过计算得到dom2中各个搜索项目元素的宽度及各元素间的间距。
22.优选地，在过滤栏宽度为最小宽度时，判断dom2的宽度与dom3的宽度之和是否大于dom1的宽度，若大于，则确定过滤栏内元素超过一行。
23.具体地，当媒体查询触发最小宽度切换节点时，由于搜索项部分与按钮项部分为两行布局，对dom2的宽度与dom3的宽度之和是否大于dom1的宽度进行判断。
24.优选地，设计展开/收起按钮，将所述展开/收起按钮定位于过滤栏的一侧，并对展开/收起按钮动态绑定布尔值showmore，以控制展开/收起按钮显示或隐藏。
25.具体地，将布尔值showmore设置为true时，显示展开/收起按钮。
26.优选地，若判断过滤栏内元素超过一行，则将dom1的高度限制为一行的高度，同时将展开/收起按钮的布尔值showmore设置为true，显示展开/收起按钮，并将展开/收起按钮切换为展开按钮。
27.具体地，在过滤栏宽度大于最小宽度时，隐藏超过一行的搜索项目部分的元素，保证交互按钮部分的元素能够始终显示出来。
28.具体地，在过滤栏宽度为最小宽度时，将搜索项目部分与交互按钮部分上下布局。只显示第一行，第二行隐藏，通过展开/收起按钮进行管理。
29.具体地，若要将多余子元素隐藏，则将展开/收起按钮切换为展开按钮时，将图标更换为展开图标，将dom1的高度限制为一行的高度。
30.具体地，若要显示过滤栏所有元素，则将展开按钮切换为收起按钮，将图标更换为收起图标，取消对dom1的高度限制。
31.本发明另一方面提供一种基于vue的过滤栏适配系统，用于实现所述基于vue的过滤栏适配方法的步骤，包括，布局模块：在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；监听模块：基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；判断模块：根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素。
32.具体地，所述布局模块对所述搜索项目部分和交互按钮部分进行独立布局，其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素；若过滤栏宽度大于最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏的一行内左右布局；若过滤栏宽度为最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局。
33.本发明还一方面提供一种装置，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现所述基于vue的过滤栏适配方法的步骤。
34.本发明还一方面提供一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述基于vue的过滤栏适配方法的步骤。
35.与现有技术相比，本发明的有益效果在于：
36.(1)本发明将搜索项目部分及交互按钮部分独立布局，满足容器内元素的样式布局适配；根据过滤栏的尺寸变化适配样式布局，提高操作体验；监听尺寸栏的尺寸变化，判断元素是否超过一行，当元素超过一行时，只显示第一行，将多余行隐藏；
37.(2)本发明通过展开/收起按钮对过滤栏中的元素进行高度管理，节省页面空间，使页面更简洁美观。
附图说明
38.图1为根据本发明的方法流程图；
39.图2为根据本发明的展开/收起流程图；
40.图3为根据本发明的方法当过滤栏宽度大于最小宽度时示意图；
41.图4为根据本发明的方法当过滤栏宽度为最小宽度时示意图；
42.图5为根据本发明的系统结构框图；
43.图6为根据本发明的装置示意框图。
具体实施方式
44.以下将结合附图对本发明各实施例的技术方案进行清楚、完整的描述，显然，所描述发实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施例，都属于本发明所保护的范围。
45.如图1所示，本发明一方面提供一种基于vue的过滤栏适配方法，包括，在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素；其中，所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素。
46.该方法具体包括：
47.s10：将搜索项目部分及交互按钮两部分独立分开布局。
48.将搜索项目部分及交互按钮两部分独立分开布局，具体步骤如下：
49.使用媒体查询设置最小宽度切换节点，设置的最小宽度能放下至少一个搜索项目元素。
50.如图4所示，当过滤栏的宽度为最小宽度时，将搜索项目部分与交互按钮部分顺序排列布局，均使用flex布局。
51.如图3所示，当过滤栏宽度大于最小宽度时，将搜索项部分与按钮部分在一行内左右布局，搜索项部分使用flex布局，宽度使用flex弹性盒子自动适配；按钮部分使用固定像素设置最小宽度，无需写死，便于拓展交互按钮。
52.设计展开图标，将其定位于过滤栏最右侧。通过在css中动态绑定布尔值showmore以控制其显示隐藏。
53.s20：监听过滤栏尺寸变化。
54.监听过滤栏尺寸变化包括在页面初次加载、过滤栏父级容器大小改变、点击展开收起按钮等情况下监听，其步骤具体为：
55.通过ref给过滤栏父级容器、过滤栏搜索项部分的父级容器、按钮部分的父级容器注册引用信息。
56.监听到事件后，通过$ref对象获取过滤栏父级容器、过滤栏搜索项部分的父级容器、按钮部分的父级容器对应的dom元素dom1、dom2、dom3。
57.计算dom2中各个搜索项元素的宽度及各元素间的间距。
58.s30：判断过滤栏内子元素是否超过一行。
59.记dom2中的子元素个数为n。作如下2个判断：
60.dom2的所有子元素宽度之和+n*(dom2中子元素的间距)》dom2的宽度
ꢀꢀꢀꢀ
式1
61.dom2的宽度+dom3的宽度》dom1的宽度
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
式2
62.式1为当过滤栏宽度大于最小宽度时的常规情况下，判断搜索项部分中的元素是否超出一行需要作的判断；式2是媒体查询触发最小宽度切换节点时，由于搜索项部分与按钮项部分为两行布局需要作的判断。
63.上述2个判断只要有任意一个为真，则执行s40。
64.如图2所示，s40：显示展开按钮，将多余子元素隐藏至仅显示一行。
65.将布尔值showmore设置为true。
66.将dom1的高度限制为一行的高度。
67.s41：展开按钮切换为收起按钮，显示过滤栏所有子项。
68.将图标更换为收起图标。
69.取消dom1的高度限制。
70.s42：收起按钮切换为展开按钮，执行s40。
71.相关术语解释：vue：一套用于构建用户界面的渐进式javascript开源框架，采用自底向上增量开发的设计。vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，vue完全有能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。
72.过滤栏：前端页面布局中一种常用模块，用于查询数据时设置过滤条件，模块内通常由2部分组成，一部分为按顺序展示若干表单形式的查询条件，一部分为用于查询或者重置的交互按钮。
73.flex：是flexible box的缩写，意为"弹性布局"，前端开发中布局方式的一种。用来为盒状模型提供最大的灵活性。
74.容器元素：前端组件的最外层元素。
75.媒体查询：由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。添加自css3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
76.视口：浏览器的可视区域。
77.如图5所示，本发明另一方面提供一种基于vue的过滤栏适配系统，用于实现所述基于vue的过滤栏适配方法的步骤，包括，布局模块：在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；监听模块：基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；判断模块：根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素。
78.具体地，所述布局模块对所述搜索项目部分和交互按钮部分进行独立布局，其中，
所述搜索项目部分包括至少一个搜索项目元素，所述交互按钮部分包括至少一个交互按钮元素；若过滤栏宽度大于最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏的一行内左右布局；若过滤栏宽度为最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局。
79.如图6所示，本发明还一方面提供一种装置，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现所述基于vue的过滤栏适配方法的步骤。
80.本领域普通技术人员可以理解实现所述基于vue的过滤栏适配方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。
81.本发明还一方面提供一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现所述基于vue的过滤栏适配方法的步骤。
82.最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案。

技术特征：
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的宽度，若大于，则确定过滤栏内元素超过一行。6.根据权利要求1所述的基于vue的过滤栏适配方法，其特征在于，设计展开/收起按钮，将所述展开/收起按钮定位于过滤栏的一侧，并对展开/收起按钮动态绑定布尔值showmore，以控制展开/收起按钮显示或隐藏。7.根据权利要求6所述的基于vue的过滤栏适配方法，其特征在于，若判断过滤栏内元素超过一行，则将dom1的高度限制为一行的高度，同时将展开/收起按钮的布尔值showmore设置为true，显示展开/收起按钮，并将展开/收起按钮切换为展开按钮。8.基于vue的过滤栏适配系统，用于实现权利要求1至7中任一项权利要求所述基于vue的过滤栏适配方法的步骤，其特征在于，包括，布局模块：在过滤栏布局搜索项目部分和交互按钮部分，所述搜索项目部分和交互按钮部分独立布局；若过滤栏的宽度大于预设的最小宽度时，则将搜索项目部分与交互按钮部分分别布局在过滤栏的左右两侧；若过滤栏的宽度为预设的最小宽度时，则将搜索项目部分与交互按钮部分在过滤栏内顺序排列布局，按照先布局搜索项目部分，再布局交互按钮部分的顺序排列布局；监听模块：基于独立布局的搜索项目部分和交互按钮部分，监听过滤栏的尺寸变化；判断模块：根据监听到的过滤栏尺寸变化，判断过滤栏内元素是否超过一行，若过滤栏
内元素超过一行，则将超过一行的多余元素隐藏，仅显示一行元素。9.一种装置，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项权利要求所述基于vue的过滤栏适配方法的步骤。10.一种可读存储介质，所述可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项权利要求所述基于vue的过滤栏适配方法的步骤。

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


技术研发人员：卢卅 刘坤 张启亮 黄凯
受保护的技术使用者：徐工汉云技术股份有限公司
技术研发日：2021.12.29
技术公布日：2023/7/22