本申请属于标签折叠，尤其涉及一种基于vue的多行标签折叠展开方法。
背景技术：
1、随着互联网技术的蓬勃发展，产品所涉及的功能需求也是越来越精细化。在前端开发中，经常会遇到通过多行标签组织和显示菜单、选项卡、工具栏、和搜索记录等。
2、最早的web页面使用html表格实现多行标签，其中每个标签作为表格单元格，并可以根据内容自动换行。随着css(层叠样式表)的引入，多行标签的布局和样式变得更加灵活和可控，使用css的弹性盒子布局或css网格布局，可以更容易的创建响应式多行标签布局，并进行自适应调整。如果标签数量超过了容器的可见区域，展示所有标签可能导致页面拥挤和混乱，给用户带来困扰。且当标签数量较多时，用户可能需要进行频繁的滚动才能找到所需的标签，这会给用户带来很不好的操作体验。
3、常用的处理方式如在标签容器中增加滚动条，但这样用户只能通过垂直滚动来查看隐藏的标签，且界面看起来不够简洁。当标签数量超过容器显示时，还可以在末尾加上省略号来表示还有更多的标签，缺点就是用户需要鼠标悬停才能看到完整的标签。
技术实现思路
1、有鉴于此，本申请旨在提出一种基于vue的多行标签折叠展开方法，以解决至少解决上述其中一个问题。
2、为达到上述目的，本申请的技术方案是这样实现的：
3、第一方面，本申请提供了一种基于vue的多行标签折叠展开方法，包括：
4、创建名为collapsiblelist.vue的vue文件，并创建flex布局的ul元素，循环标签数据并渲染出每个标签的li元素，单独创建一个li元素作为折叠展开的按钮；
5、获取容器宽度和标签数据，并根据标签最大显示个数和按钮状态进行渲染，渲染标签后计算出所有项的总展示宽度，获取显示行和容器宽度并计算得到展示标签的最大宽度；
6、基于标签数据宽度和展开标签的最大宽度，根据预先设定的折叠显示策略动态设置标签的折叠与展开。
7、第二方面，基于同一发明构思，本申请还提供了一种基于vue的多行标签折叠展开装置，包括：
8、创建模块，被配置为创建名为collapsiblelist.vue的vue文件，并创建flex布局的ul元素，循环标签数据并渲染出每个标签的li元素，单独创建一个li元素作为折叠展开的按钮；
9、获取模块，被配置为获取容器宽度和标签数据，并根据标签最大显示个数和按钮状态进行渲染，渲染标签后计算出所有项的总展示宽度，获取显示行和容器宽度并计算得到展示标签的最大宽度；
10、设置模块，被配置为基于标签数据宽度和展开标签的最大宽度，根据预先设定的折叠显示策略动态设置标签的折叠与展开。
11、第三方面，基于同一发明构思，本申请还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所述的方法。
12、第四方面，基于同一发明构思，本申请还提供了一种非暂态计算机可读存储介质，其中，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行如第一方面所述的方法。
13、相对于现有技术，本申请所述的基于vue的多行标签折叠展开方法具有以下有益效果：
14、本申请所述的基于vue的多行标签折叠展开方法基于vue框架，通过传入标签数据、显示行、容器宽度即可实现多行标签的折叠展开功能，可以显著提高大量数据列表的性能，以提供更好的用户体验和更高效的数据呈现。
1.一种基于vue的多行标签折叠展开方法，其特征在于，包括：
2.根据权利要求1所述的方法，其特征在于，所述折叠显示策略包括：
3.根据权利要求2所述的方法，其特征在于：
4.根据权利要求2所述的方法，其特征在于：
5.根据权利要求1所述的方法，其特征在于：
6.根据权利要求1所述的方法，其特征在于：
7.一种基于vue的多行标签折叠展开装置，其特征在于，包括：
8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-6任一项所述的方法。
9.一种非暂态计算机可读存储介质，其特征在于，其中，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使计算机执行权利要求1-6任一项所述的方法。
