Multi-row label folding and unfolding method based on vue

Abstract

The invention provides a vue-based multi-row label folding and unfolding method, which comprises the following steps of: creating a Vue file with a name of coloapsileList.vue, creating ul elements of flex layout, circulating label data, rendering li elements of each label, and independently creating one li element as a button for folding and unfolding; obtaining container width and label data, performing rendering according to the maximum display number of the labels and the button state, calculating the total display width of all items after the labels are rendered, obtaining display lines and container width, and calculating to obtain the maximum width of the display labels; and dynamically setting folding and unfolding of the label according to a preset folding display strategy based on the label data width and the maximum width of the unfolded label. According to the method, the folding and unfolding functions of multiple rows of labels can be achieved, the performance of a large number of data lists is remarkably improved, and better user experience and more efficient data presentation are provided.

Description

Technical Field

[0001] The present application belongs to the field of tag folding technology, and in particular, relates to a multi-line tag folding and expanding method based on Vue. Background Art

[0002] With the rapid development of Internet technology, the functional requirements of products are becoming more and more refined. In front-end development, we often encounter the organization and display of menus, tabs, toolbars, and search records through multiple lines of tags.

[0003] The earliest web pages used HTML tables to implement multi-line tags, where each tag was used as a table cell and could automatically wrap based on the content. With the introduction of CSS (Cascading Style Sheets), the layout and style of multi-line tags became more flexible and controllable. Using CSS's elastic box layout or CSS grid layout, it is easier to create responsive multi-line tag layouts and make adaptive adjustments. If the number of tags exceeds the visible area of ​​the container, displaying all tags may cause the page to be crowded and messy, causing trouble for users. And when there are a large number of tags, users may need to scroll frequently to find the required tags, which will give users a very bad operating experience.

[0004] Common processing methods include adding a scroll bar to the label container, but in this way users can only view hidden labels by scrolling vertically, and the interface does not look concise enough. When the number of labels exceeds the container display, you can also add an ellipsis at the end to indicate that there are more labels. The disadvantage is that users need to hover the mouse to see the complete label. Summary of the invention

[0005] In view of this, the present application aims to propose a multi-line label folding and expanding method based on Vue to solve at least one of the above problems.

[0006] To achieve the above purpose, the technical solution of this application is implemented as follows:

[0007] In a first aspect, the present application provides a multi-line label folding and expanding method based on Vue, comprising:

[0008] Create a Vue file named collapsibleList.vue, create a ul element of the flex layout, loop the tag data and render the li element of each tag, and create a separate li element as a folding and expanding button;

[0009] Get the container width and label data, and render according to the maximum number of labels and button status. After rendering the labels, calculate the total display width of all items, get the display row and container width, and calculate the maximum width of the displayed labels.

[0010] Based on the label data width and the maximum width of the expanded label, the label's folding and expanding are dynamically set according to the pre-set folding display strategy.

[0011] In the second aspect, based on the same inventive concept, the present application also provides a multi-line label folding and unfolding device based on Vue, including:

[0012] Create a module, which is configured to create a Vue file named collapsibleList.vue, create a ul element of the flex layout, loop the tag data and render the li element of each tag, and create a separate li element as a folding and expanding button;

[0013] The acquisition module is configured to acquire the container width and label data, and render according to the maximum display number of labels and the button state, calculate the total display width of all items after rendering the labels, acquire the display line and container width, and calculate the maximum width of the displayed labels;

[0014] The setting module is configured to dynamically set the folding and unfolding of the label according to a preset folding display strategy based on the label data width and the maximum width of the unfolded label.

[0015] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.

[0016] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.

[0017] Compared with the prior art, the multi-line label folding and expanding method based on Vue described in this application has the following beneficial effects:

[0018] The Vue-based multi-line label folding and expanding method described in this application is based on the Vue framework. The folding and expanding function of multi-line labels can be realized by passing in label data, display lines, and container width. It can significantly improve the performance of large data lists to provide a better user experience and more efficient data presentation. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0020] Figure 1This is a schematic diagram of a flow chart of a multi-line label folding and expanding method based on Vue according to an embodiment of the present application;

[0021] Figure 2 This is a specific implementation flowchart of the Vue-based multi-line label folding and expanding method described in an embodiment of the present application;

[0022] Figure 3 This is a schematic diagram of the structure of a multi-line label folding and unfolding device based on Vue according to an embodiment of the present application;

[0023] Figure 4 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0025] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0026] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0027] This solution uses the folding and expanding method. In the initial state, only some tags are displayed, and the rest of the tags are folded and hidden. Users can click the expand button to view all tags. This not only saves page space but also makes the interface neater.

[0028] See also Figure 1 and Figure 2 As shown, this embodiment provides a multi-line label folding and expanding method based on Vue, including:

[0029] Step S101, create a Vue file named collapsibleList.vue, create a ul element of the flex layout, loop the tag data and render the li element of each tag, and create a separate li element as a folding and expanding button.

[0030] Specifically, in this embodiment, step S101 specifically includes the following steps:

[0031] 1. Create a file called collapsibleList.vue.

[0032] 2. Write the HTML part

[0033] 2.1. Create a ul element with a flex layout. The reason for using flex layout is that it can provide a flexible way to arrange sub-elements, which is suitable for arranging and allocating space for inline elements, so that the label list can maintain a good layout on different screen sizes;

[0034] 2.2. Loop labelList to render the li element of each label, and create a separate li element as the fold and expand button; in this step, each label is represented by a li element, and the Vue v-for instruction can be used to easily traverse the array labelList and dynamically generate list items. The additional li element is used as the fold and expand button to provide user interaction functions, allowing users to control the display status of the list.

[0035] Step S102, obtain the container width and label data, and render according to the maximum number of labels displayed and the button status, calculate the total display width of all items after rendering the label, obtain the display line and container width and calculate the maximum width of the displayed label.

[0036] Specifically, in this embodiment, step S102 and step S103 are mainly implemented based on JavaScript, wherein step S102 includes:

[0037] 3.1. Get containerWidth and set the width of the container, get labelList data and render according to the maximum number of labels to be displayed and the state of the fold and expand button, which is folded by default. In this step, the container width is obtained to determine how many labels can be displayed in a given space; then, the number of labels to be displayed at the initial load is determined according to the folding state (folded by default).

[0038] 3.2. After rendering the label, calculate the display width of all items added together, obtain showRow and containerWidth to calculate the maximum width of the displayed label. This step is to adapt to the changes in different screen sizes or container sizes, dynamically adjust the number of labels that can be displayed, and ensure the neatness of the UI and ease of use for users.

[0039] Step S103: Based on the width of the label data and the maximum width of the expanded label, dynamically set the folding and expanding of the label according to a preset folding display strategy.

[0040] Specifically, in this embodiment, the folding display strategy of step S103 specifically includes the following steps:

[0041] S201, determining whether the overall width of the label data is greater than the maximum width of the expanded label. The purpose of this step is to evaluate whether a folding button is required. If the sum of the widths of all labels exceeds the maximum width that can be displayed by the container, the folding button is required;

[0042] S202, in response to the overall width of the label data being greater than the maximum width of the expanded label, the button is set to the folded state, the label data (label list) is looped and the width of each label is accumulated to determine the number of labels that can be accommodated under the current container width. The purpose of this step is to determine whether the total width of the label data exceeds the maximum display width allowed by the container. If exceeded, the label data is set to the folded state, and the width of each label is calculated to determine how many labels can be displayed in the non-expanded state.

[0043] S203, judging whether it is a non-display row, determining the label to be displayed according to the judgment result, clicking a button to set whether to fully expand, and re-rendering;

[0044] This step mainly determines which rows should be displayed and how to control the display status through the collapse and expansion buttons.

[0045] S204. In response to the non-display row and the accumulated value being greater than the container width, it is counted as one row, and the accumulated value is reset to the width of the current item. If the accumulated value of the row before the display row is greater than the difference between the container width and the button width, it is recorded as a blank row, and then the loop is looped to set the button to a folded state, and the loop continues to calculate the accumulated value of each item.

[0046] This step determines whether the label needs to be wrapped based on the accumulated width. Specifically, in the loop, the width of each label is accumulated and compared with the container width. If the accumulated width exceeds the container width, it means that a line break is required. Once it is determined that a line break is required, the accumulated width is reset to the width of the current label and the calculation of a new line is started. If it is the last row in the non-expanded state (the row before the showRow row), you need to ensure that there is enough space in this row to display the collapse / expand button. This requires adjusting the position of the last displayable label in the row to ensure that the button has enough display space.

[0047] S205. In response to the display row being not displayed, determining whether the accumulated value is greater than the difference between the container width and the button width; in response to the accumulated value being greater than the difference between the container width and the button width, saving the position of the current item and exiting the loop.

[0048] This step is to determine the position of the last displayable label in the non-expanded state. If it is found during the calculation process that the width of the showRow row plus the current label width exceeds the container width minus the button width, then save the position of the current label. Once the last displayable label is determined, the loop can be jumped to avoid unnecessary calculations.

[0049] The above steps ensure that the label list can dynamically adjust the number of displayed labels according to the size of the container, and provide a user operation interface (collapse / expand button) when necessary, thereby increasing user interactivity while maintaining the beauty of the interface.

[0050] S206: Calculate the maximum displayed label position as the difference between the current position and the empty line, and re-render the display label according to the display position.

[0051] Determine the label position of the last row that can be fully displayed based on the calculated number of rows and the label width of each row. In some cases, the label of the last row may only fill part of the container width, leaving a blank space. In order to maximize aesthetics and space utilization, it is necessary to subtract these "blank rows" from the last position displayed to determine the actual displayed label. Update the view layer based on the above calculations to only display labels within the calculated label position range. This can be achieved by dynamically adjusting the label array or using Vue's conditional rendering.

[0052] S207: In response to the accumulated value being smaller than the difference between the container width and the button width, looping to set the button to a folded state, and continuing to loop to calculate each accumulated value.

[0053] This step ensures that when the cumulative width of the labels approaches but does not exceed the difference between the container width and the collapse button width, the interface can be adjusted appropriately to allow the collapse button to be displayed instead of forcing it to wrap to a new line, which can make more efficient use of space and improve the user experience.

[0054] After the user clicks the collapse button, if the current state is collapsed, all labels are expanded; if it is expanded, only the calculated number of labels that can be displayed is displayed.

[0055] In some embodiments, the display size of the container and the default number of displayed rows are dynamically set according to the display rows and the container width. Through the above settings, the Vue component can respond to changes in the window size and dynamically adjust the display size of the container and the default number of displayed rows. Such settings not only improve the adaptability of the user interface, but also enhance the user experience, so that the component performs consistently on different devices and screen sizes.

[0056] This application's Vue-based multi-line label folding and expanding method is based on the Vue framework. By passing in label data, display lines, and container width, the folding and expanding functions of multi-line labels can be realized, which can significantly improve the performance of large data lists to provide a better user experience and more efficient data presentation.

[0057] When implementing this plan:

[0058] 1. Import the collapsibleList.vue plug-in.

[0059] 2. Page usage <collapsible-list>tag and pass in the following parameters.

[0060]

[0061] 3. The component will automatically render according to the parameters.

[0062] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0063] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, the embodiment of the present application also provides a multi-line label folding and expanding device based on Vue.

[0064] like Figure 3 As shown, the multi-line label folding and unfolding device based on Vue includes:

[0065] Create module 11, which is configured to create a Vue file named collapsibleList.vue, create a ul element of the flex layout, loop the tag data and render the li element of each tag, and create a separate li element as a folding and expanding button;

[0066] The acquisition module 12 is configured to acquire the container width and label data, and render according to the maximum number of labels displayed and the button state, calculate the total display width of all items after rendering the label, acquire the display line and container width, and calculate the maximum width of the displayed label;

[0067] The setting module 13 is configured to dynamically set the folding and unfolding of the label according to a preset folding display strategy based on the label data width and the maximum width of the unfolded label.

[0068] For the convenience of description, the above devices are described in terms of functions and are divided into various modules. Of course, when implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware.

[0069] The device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0070] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.

[0071] Figure 4 A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.

[0072] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.

[0073] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.

[0074] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0075] The communication interface 1040 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0076] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040).

[0077] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.

[0078] The electronic device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.

[0079] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in any of the above embodiments.

[0080] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.

[0081] The computer instructions stored in the storage medium of the above embodiments are used to enable the computer to execute the method described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.

[0082] Those skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.

[0083] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power supply / ground connection with the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device can be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented in the embodiments of the present application (that is, these details should be fully within the scope of understanding of those skilled in the art). In the case of elaborating specific details (e.g., circuits) to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or when these specific details are changed. Therefore, these descriptions should be considered to be illustrative rather than restrictive.

[0084] Although the present application has been described in conjunction with specific embodiments of the present application, many replacements, modifications and variations of these embodiments will be apparent to those skilled in the art from the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

[0085] The embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of the present application.

Claims

1. A multi-line label folding and expanding method based on Vue, characterized in that: include: Create a Vue file named collapsibleList.vue, create a ul element for the flex layout, loop the tag data and render the li element for each tag, and create a separate li element as a folding and expanding button; Get the container width and label data, and render according to the maximum number of labels and button status. After rendering the labels, calculate the total display width of all items, get the display row and container width, and calculate the maximum width of the displayed labels. Based on the label data width and the maximum width of the expanded label, the label's folding and expanding are dynamically set according to the pre-set folding display strategy.

2. The method according to claim 1, characterized in that The folding display strategy includes: Determine whether the overall width of the label data is greater than the maximum width of the expanded label; In response to the overall width of the label data being greater than the maximum width of the expanded label, setting the button to a collapsed state, looping through the label data and accumulating the width of each label; Determine whether it is a non-display row, determine the label to be displayed based on the judgment result, click the button to set whether to expand all, and re-render.

3. The method according to claim 2, wherein: In response to the non-display row and the accumulated value being greater than the container width, it is counted as a row and the accumulated value is reset to the width of the current item. If the accumulated value of the row before the displayed row is greater than the difference between the container width and the button width, it is recorded as a blank row. The loop is then looped to set the button to the collapsed state, and the loop continues to calculate the accumulated value of each item.

4. The method according to claim 2, wherein: In response to the display row being not displayed, determining whether the accumulated value is greater than the difference between the container width and the button width, and in response to the accumulated value being greater than the difference between the container width and the button width, saving the position of the current item and exiting the loop; Calculate the maximum display label position as the difference between the current position and the empty line, and re-render the display label according to the display position; In response to the accumulated value being less than the difference between the container width and the button width, the process loops to set the button to a collapsed state, and continues looping to calculate each accumulated value.

5. The method according to claim 1, wherein: When obtaining the container width and label data and rendering according to the maximum number of labels displayed and the button status, the button is collapsed by default.

6. The method according to claim 1, wherein: Set the container's display size and default number of display rows based on the display rows and container width.

7. A multi-line label folding and expanding device based on Vue, characterized in that: include: Create a module, which is configured to create a Vue file named collapsibleList.vue, create a ul element for the flex layout, loop the tag data and render the li element for each tag, and create a separate li element as a folding and expanding button; An acquisition module is configured to obtain container width and label data, render according to the maximum number of labels displayed and the button state, calculate the total display width of all items after rendering the labels, obtain the display row and container width, and calculate the maximum width of the displayed labels; The setting module is configured to dynamically set the folding and expanding of the label according to a preset folding display strategy based on the label data width and the maximum width of the expanded label.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the method according to any one of claims 1 to 6 is implemented.

9. A non-transitory computer-readable storage medium, characterized in that in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 6.

Images