Search bar adaptive layout method and device, equipment and medium

Abstract

The invention discloses a search bar adaptive layout method and device, equipment and a medium, and the method comprises the steps: responding to input attribute data, and calling a layout assembly to create a layout array; traversing array items of the layout array through the layout component, and rendering a plurality of grid column elements; and when the slot content is received, traversing all the grid column elements according to the slot content, and rendering to generate a plurality of search bars to be displayed on the target page. Therefore, the code writing and style management process is effectively simplified, code redundancy is avoided, and the layout flexibility of the search bar is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of search bar layout, and in particular to a search bar adaptive layout method, device, equipment and medium. Background Art

[0002] In today's front-end development field, the use of fence layout is becoming more and more widespread. With the continuous development of Internet applications and the gradual improvement of users' requirements for interface aesthetics and interactivity, front-end development is facing more and more challenges. In the current Vue.js front-end development practice, fence layout, as an important page layout method, can effectively realize the flexible arrangement and responsive design of page elements.

[0003] Among them, Element UI is a popular UI component library. Its specific layout solution is to create a fence layout on the page by directly using the el-col component in the Element UI component library.

[0004] However, when dealing with repetitive search bars and multi-column layouts, if the component needs to be called to achieve the same style effect in different pages, the same code needs to be written multiple times, which easily leads to code redundancy and reduces layout flexibility. Summary of the invention

[0005] The present invention provides a search bar adaptive layout method, device, equipment and medium, which solves the technical problem that when existing solutions process repetitive search bars and multi-column layouts, if the component needs to be called to achieve the same style effect in different pages, the same code needs to be written multiple times, which easily leads to code redundancy and reduces layout flexibility.

[0006] A first aspect of the present invention provides a search bar adaptive layout method, comprising:

[0007] In response to the input attribute data, call the layout component to create a layout array;

[0008] Traversing the array items of the layout array by the layout component, rendering a plurality of grid column elements;

[0009] When the slot content is received, all the grid column elements are traversed according to the slot content, and multiple search bars are rendered and generated for display on the target page.

[0010] Optionally, in response to the inputted attribute data, calling the layout component to create a layout array includes:

[0011] In response to the inputted attribute data, calling the layout component to parse the attribute data;

[0012] If the attribute data only includes the number of array columns, then a corresponding number of array items are created according to the number of array columns to obtain a layout array;

[0013] Adopts the default column spacing as the spacing property of the layout array.

[0014] Optionally, it also includes:

[0015] If the attribute data further includes array column spacing, the array column spacing is determined as the spacing attribute of the layout array.

[0016] Optionally, the array item is provided with a grid style attribute and a grid fixed column width; and traversing the array items of the layout array by the layout component to render a plurality of grid column elements comprises:

[0017] Traversing the array items of the layout array through the layout component to create an initial element with a fixed column width of the grid;

[0018] Create a named slot associated with each of the initial elements and assign a corresponding unique index;

[0019] A grid style corresponding to the grid style attribute is applied to each of the initial elements to obtain a grid column element.

[0020] Optionally, when receiving the slot content, traversing all the grid column elements according to the slot content, and rendering to generate multiple search bars to be displayed on the target page, includes:

[0021] When receiving the slot content, traverse all the named slots in the grid column elements according to the slot content to determine whether the named slot matches the slot content;

[0022] If there is a match, the grid column element is rendered and the slot content is filled to generate a search bar;

[0023] If there is no match, the grid column element is rendered and the preset placeholder is filled to generate a search bar;

[0024] When the grid column elements are traversed, a plurality of the search bars are displayed on the target page.

[0025] Optionally, the method further comprises:

[0026] When the received slot content is a default value, all the grid column elements are rendered and filled with preset unified content, generating multiple search bars to be displayed on the target page.

[0027] Optionally, the method further comprises:

[0028] When no slot content is received, all the grid column elements are rendered and the preset placeholders are filled, so as to generate multiple search bars to be displayed on the target page.

[0029] A second aspect of the present invention provides a search bar adaptive layout device, comprising:

[0030] The data response module is used to respond to the input attribute data and call the layout component to create a layout array;

[0031] An element rendering module, used for traversing the array items of the layout array through the layout component, and rendering a plurality of grid column elements;

[0032] The page rendering module is used to traverse all the grid column elements according to the slot content when receiving the slot content, and render and generate multiple search bars for display on the target page.

[0033] A third aspect of the present invention provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the search bar adaptive layout method as described in any one of the first aspect of the present invention.

[0034] A fourth aspect of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed, the method for adaptive layout of a search bar as described in any one of the first aspects of the present invention is implemented.

[0035] It can be seen from the above technical solutions that the present invention has the following advantages:

[0036] The present invention responds to the input attribute data, calls the layout component to create a layout array; traverses the array items of the layout array through the layout component, and renders multiple grid column elements; when receiving the slot content, traverses all the grid column elements according to the slot content, and renders and generates multiple search bars to be displayed on the target page. This effectively simplifies the code writing and style management process, avoids code redundancy, and improves the flexibility of the search bar layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0038] Figure 1 A flowchart of a method for adaptive layout of a search bar provided by an embodiment of the present invention;

[0039] Figure 2 A schematic diagram of a component structure of a layout component provided by an embodiment of the present invention;

[0040] Figure 3 A schematic diagram of displaying multiple search boxes on a target page provided by an embodiment of the present invention;

[0041] Figure 4 A structural block diagram of a search bar adaptive layout device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0042] The embodiments of the present invention provide a search bar adaptive layout method, device, equipment and medium, which are used to solve the technical problem that when existing solutions deal with repetitive search bars and multi-column layouts, if the component needs to be called to achieve the same style effect in different pages, the same code needs to be written multiple times, which easily leads to code redundancy and reduces layout flexibility.

[0043] In order to make the purpose, features and advantages of the present invention more obvious and easy to understand, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described below are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0044] See also Figure 1 , Figure 1 A flowchart of the steps of a search bar adaptive layout method provided by an embodiment of the present invention.

[0045] The present invention provides a search bar adaptive layout method, comprising:

[0046] Step 101, in response to the input attribute data, call the layout component to create a layout array;

[0047] The layout component is a Vue component that encapsulates the grid layout logic. It can be configured through props (number of rows and columns per num, gutter between columns) and slot mechanism, allowing users to easily implement a highly customizable and reusable layout structure. Its component structure is as follows Figure 2 As shown, the main properties of the component are: num: 3, gutter: 3

[0048] The layout array stores a plurality of array items, each of which represents a column of search boxes of a predetermined width in the page, and is used to store data information required for rendering grid column elements (ie, el-col elements).

[0049] Attribute data refers to data used to define the number of search boxes num, gutter, width spanSize, and style class.

[0050] In an embodiment of the present invention, the method can be implemented by a browser, etc. After the parent component of the browser receives the attribute data, it parses it to determine the component to be called. If the attribute data specifies a layout component, the layout component is called to further parse the attribute data to create a layout array according to the number of data columns, data column spacing, and other data.

[0051] In an example of the present invention, step 101 may include the following sub-steps:

[0052] In response to the input attribute data, call the layout component to parse the attribute data;

[0053] If the attribute data only includes the number of array columns, then a corresponding number of array items are created according to the number of array columns to obtain a layout array;

[0054] Use the default column spacing as the spacing property of the layout array.

[0055] The number of array columns refers to the number of search boxes inserted in each row of the page, and the array column data refers to the fence spacing between the search boxes.

[0056] In this embodiment, after the parent component of the browser receives the attribute data, the layout component is called to parse the attribute data. If the attribute data obtained by parsing only includes the number of array columns, it indicates that the spacing between array items at this time is the default column spacing. The columns calculation property inside the layout component can be directly used to create the same number of array items according to the number of array columns num to obtain the number of search boxes required by the current page. All array items are used to generate an initial situation of a layout array from 0 to num-1. At the same time, the default column spacing is used as the spacing attribute of the layout array to complete the construction of the layout array.

[0057] The default column spacing is 20.

[0058] In another example of the present invention, if the attribute data is only for calling a layout component, the number of array columns can also be set to a default value of 1, and a single-column layout array is created at this time.

[0059] Furthermore, step 101 further includes:

[0060] If the attribute data also includes array column spacing, the array column spacing is determined as the spacing attribute of the layout array.

[0061] In an embodiment of the present invention, in order to further improve the layout flexibility of the subsequent search box, an input item of the array column spacing can be added to the attribute data for user input. After the layout component parses the attribute data, if the attribute data includes the array column spacing gutter in addition to the number of array columns, the spacing attribute of the layout array is set according to the data column spacing, thereby completing the construction of the layout array.

[0062] In addition, after receiving the attribute data, the layout component needs to further perform integer judgment on the number of array columns and the array column spacing to ensure that the received number of array columns and the array column spacing are positive integers.

[0063] Step 102, traversing the array items of the layout array through the layout component, and rendering multiple grid column elements;

[0064] The grid column element refers to the search box element el-col in the page, which is used to define columns in the grid layout. By using it with el-row, you can quickly build a responsive page layout. el-row is mainly used as a container to wrap multiple el-col column elements to organize and manage the layout structure of the page. It provides a unified layout environment for column elements to ensure that column elements can be arranged and aligned as expected.

[0065] In the embodiment of the present invention, after completing the construction of the layout array, the layout component traverses the array items therein and determines to render the grid column elements one by one.

[0066] In an example of the present invention, the array item is provided with a grid style attribute and a grid fixed column width; step 102 may include the following sub-steps:

[0067] Traverse the array items of the layout array through the layout component and create the initial element with a fixed column width of the grid;

[0068] Create named slots associated with each initial element and assign them corresponding unique indexes;

[0069] Apply the grid style corresponding to the grid style attribute to each initial element to obtain a grid column element.

[0070] The grid fixed column width is used to limit the display length of the search box on the page.

[0071] In this embodiment, the array items of the layout array are traversed by the layout component, each array item is judged one by one, and an initial element with a fixed grid column width is created for each array item. At the same time, a corresponding dynamic named slot is created for each initial element and a unique index is assigned according to the creation order, such as <slot :name="'col-' + index">. Where index is the unique index of the initial element el-col. Apply the grid style class corresponding to the grid style attribute to each initial element to obtain a grid column element.

[0072] In addition, each el-col element is given a unique key (based on its index), a fixed span size (spanSize, which is assumed to be defined in the component but not shown in the code snippet), and a class name custom-grid-col that qualifies the grid style class.

[0073] Step 103, when the slot content is received, all grid column elements are traversed according to the slot content, and multiple search bars are rendered and generated and displayed on the target page.

[0074] In an example of the present invention, step 103 may include the following sub-steps:

[0075] When the slot content is received, the named slots in all grid column elements are traversed according to the slot content to determine whether the named slot matches the slot content;

[0076] If it matches, render the grid column element and fill the slot content to generate the search bar;

[0077] If there is no match, render the grid column element and fill the preset placeholder to generate a search bar;

[0078] When the grid column elements are traversed, multiple search bars are displayed on the target page.

[0079] In an embodiment of the present invention, when the parent component of the browser receives the slot content, it is necessary to provide the corresponding slot content for the specific column, and render the slot content into the corresponding grid column element. To this end, the named slots of all grid column elements are traversed according to the slot content, and each named slot is determined one by one to see whether it matches the slot content. Specifically, the slot content can be matched one by one with the unique index or name of each named slot. If the match is successful, the slot content is filled in the grid column element and rendered on the page, generating a corresponding search bar. If the match is not successful, it means that the parent component has not provided content for the grid column element, then the preset placeholder is filled in the grid column element and rendered as a search bar. When the grid column elements are traversed, that is, all el-col elements are rendered, and the el-row containing them is also rendered, so that the rendering process of the entire component ends, and multiple search bars are displayed on the target page, such as Figure 3 shown.

[0080] The slot content can be array content, text content, or dynamic content. If the parent component provides slot content with the corresponding name for a specific column, the content will be rendered into the corresponding el-col. If the parent component does not provide content for a column, a placeholder is displayed. , which contains the index of the column plus 1 (Column {{ index + 1}}).

[0081] In one example of the present invention, the method further comprises the following steps:

[0082] When the received slot content is the default value, all grid column elements are rendered and filled with preset unified content, generating multiple search bars to be displayed on the target page.

[0083] In this embodiment, if the slot content is the default value, it means that the parent component provides unified content for all grid column elements, all grid column elements can be rendered and filled with the preset unified content, generating multiple search bars to be displayed on the target page.

[0084] In another example of the present invention, the method further comprises the following steps:

[0085] When no slot content is received, all grid column elements are rendered and filled with preset placeholders, generating multiple search bars to be displayed on the target page.

[0086] In a specific implementation, if the user does not enter slot content into the parent component and rendering is required, all grid column elements are also rendered and filled with preset placeholders, multiple search bars are generated and displayed on the target page.

[0087] In addition, you can directly introduce the el-col layout of elementui in the page where the card is needed, and then write the component style directly in the page. The disadvantage is: if other pages also need to use the layout, and the style is the same as that of this page, it will increase the amount of extra code. If other content remains unchanged, it will also increase a lot of useless code.

[0088] In this embodiment, in different pages or applications, you only need to introduce this component and pass in the corresponding props to quickly implement the search bar style layout without having to write the same code repeatedly; all logic and styles related to the search bar are encapsulated inside the component, which is convenient for centralized management and maintenance. When you need to modify the style or function of the search bar, you only need to modify the code inside the component without having to modify it in every place where the search bar is used. By receiving the number of items per line through props, the layout effect can be dynamically adjusted as needed. This parameterized configuration method not only improves the flexibility of the layout effect, reduces errors caused by style modifications, but also makes the component easier to maintain and expand. Using Vue's slot mechanism, the parent component is allowed to insert custom content into the component. In this way, the component can place the incoming content in the corresponding position, further improving the reusability and flexibility of the component. By encapsulating the adaptive layout style inside the component and determining the display effect through dynamic style, the present invention simplifies the work of style management. Developers do not need to write a large number of style rules in the global style sheet, nor do they need to worry about style conflicts or redundancy. The component can dynamically create columns according to the value of columnsprop, and the width of each column is automatically calculated to ensure that the total width (assuming a 24-grid grid) is evenly distributed. This dynamism makes the component more flexible and powerful under different layout requirements.

[0089] In the embodiment of the present invention, in response to the input attribute data, the layout component is called to create a layout array; the array items of the layout array are traversed by the layout component to render multiple grid column elements; when the slot content is received, all grid column elements are traversed according to the slot content, and multiple search bars are rendered and generated to be displayed on the target page. This effectively simplifies the code writing and style management process, avoids code redundancy, and improves the flexibility of the search bar layout.

[0090] See also Figure 4 , Figure 4 A structural block diagram of a search bar adaptive layout device in an embodiment of the present invention is shown.

[0091] An embodiment of the present invention provides a search bar adaptive layout device, including:

[0092] The data response module 401 is used to respond to the input attribute data and call the layout component to create a layout array;

[0093] An element rendering module 402 is used to traverse the array items of the layout array through the layout component and render multiple grid column elements;

[0094] The page rendering module 403 is used to traverse all grid column elements according to the slot content when receiving the slot content, and render and generate multiple search bars to be displayed on the target page.

[0095] Optionally, the data response module 401 is specifically used for:

[0096] In response to the input attribute data, call the layout component to parse the attribute data;

[0097] If the attribute data only includes the number of array columns, then a corresponding number of array items are created according to the number of array columns to obtain a layout array;

[0098] Use the default column spacing as the spacing property of the layout array.

[0099] Optionally, the data response module 401 is further configured to:

[0100] If the attribute data also includes array column spacing, the array column spacing is determined as the spacing attribute of the layout array.

[0101] Optionally, the array item is provided with a grid style attribute and a grid fixed column width; the element rendering module 402 is specifically used for:

[0102] Traverse the array items of the layout array through the layout component and create the initial element with a fixed column width of the grid;

[0103] Create named slots associated with each initial element and assign them corresponding unique indexes;

[0104] Apply the grid style corresponding to the grid style attribute to each initial element to obtain a grid column element.

[0105] Optionally, the page rendering module 403 is specifically used for:

[0106] When the slot content is received, the named slots in all grid column elements are traversed according to the slot content to determine whether the named slot matches the slot content;

[0107] If it matches, render the grid column element and fill the slot content to generate the search bar;

[0108] If there is no match, render the grid column element and fill the preset placeholder to generate a search bar;

[0109] When the grid column elements are traversed, multiple search bars are displayed on the target page.

[0110] Optionally, the page rendering module 403 is further configured to:

[0111] When the received slot content is the default value, all grid column elements are rendered and filled with preset unified content, generating multiple search bars to be displayed on the target page.

[0112] Optionally, the page rendering module 403 is further configured to:

[0113] When no slot content is received, all grid column elements are rendered and filled with preset placeholders, generating multiple search bars to be displayed on the target page.

[0114] An embodiment of the present invention provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the search bar adaptive layout method as described in any embodiment of the present invention.

[0115] An embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed, the method for adaptive layout of a search bar as described in any embodiment of the present invention is implemented.

[0116] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the above-described devices and modules can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0117] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the modules is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or modules, which can be electrical, mechanical or other forms.

[0118] The modules described as separate components may or may not be physically separated, and the components shown as modules may or may not be physical modules, that is, they may be located in one place or distributed on multiple network modules. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0119] In addition, each functional module in each embodiment of the present invention may be integrated into one processing module, or each module may exist physically separately, or two or more modules may be integrated into one module. The above integrated modules may be implemented in the form of hardware or in the form of software functional modules.

[0120] If the integrated module is implemented in the form of a software function module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for an electronic device (which can be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0121] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention. < / slot>

Claims

1. A search bar adaptive layout method, characterized in that: include: In response to the input attribute data, call the layout component to create a layout array; Traversing the array items of the layout array by the layout component, rendering a plurality of grid column elements; When the slot content is received, all the grid column elements are traversed according to the slot content, and multiple search bars are rendered and generated for display on the target page.

2. The method according to claim 1, characterized in that The response input attribute data calls the layout component to create a layout array, including: In response to the inputted attribute data, calling the layout component to parse the attribute data; If the attribute data only includes the number of array columns, then a corresponding number of array items are created according to the number of array columns to obtain a layout array; Adopts the default column spacing as the spacing property of the layout array.

3. The method according to claim 2, characterized in that Also includes: If the attribute data further includes array column spacing, the array column spacing is determined as the spacing attribute of the layout array.

4. The method according to claim 1, characterized in that The array item is provided with a grid style attribute and a grid fixed column width; the array item of the layout array is traversed by the layout component to render a plurality of grid column elements, including: Traversing the array items of the layout array through the layout component to create an initial element with a fixed column width of the grid; Create a named slot associated with each of the initial elements and assign a corresponding unique index; A grid style corresponding to the grid style attribute is applied to each of the initial elements to obtain a grid column element.

5. The method according to claim 4, characterized in that When the slot content is received, all the grid column elements are traversed according to the slot content, and multiple search bars are rendered and displayed on the target page, including: When receiving the slot content, traverse all the named slots in the grid column elements according to the slot content to determine whether the named slot matches the slot content; If there is a match, the grid column element is rendered and the slot content is filled to generate a search bar; If there is no match, the grid column element is rendered and the preset placeholder is filled to generate a search bar; When the grid column elements are traversed, a plurality of the search bars are displayed on the target page.

6. The method according to claim 1, characterized in that The method further comprises: When the received slot content is a default value, all the grid column elements are rendered and filled with preset unified content, generating multiple search bars to be displayed on the target page.

7. The method according to claim 1, characterized in that The method further comprises: When no slot content is received, all the grid column elements are rendered and the preset placeholders are filled, so as to generate multiple search bars to be displayed on the target page.

8. A search bar adaptive layout device, characterized in that: include: The data response module is used to respond to the input attribute data and call the layout component to create a layout array; An element rendering module, used for traversing the array items of the layout array through the layout component, and rendering a plurality of grid column elements; The page rendering module is used to traverse all the grid column elements according to the slot content when receiving the slot content, and render and generate multiple search bars for display on the target page.

9. An electronic device, characterized in that: It comprises a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of the search bar adaptive layout method as described in any one of claims 1-7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed, the search bar adaptive layout method according to any one of claims 1 to 7 is implemented.

Images