Vue-based management system page layout method

Abstract

The invention provides a vue-based management system page layout method, which comprises the following steps of: creating a public component base-lay-row as an external container for limiting the size of a region and providing height self-adaptive setting; creating a public component base-lay-col as an internal grid, controlling the width through span attributes, and uniformly setting the styles of a title and a content area; and registering the base-lay-row component and the base-lay-col component as a global component, so that the base-lay-row component and the base-lay-col component can be directly called by a developer. The management system page layout method based on the vue has the beneficial effects that the automation and the unification of the page layout are realized by developing the public components based on the base-out-row and the base-out-col and carrying out global registration on the public components.

Description

Technical Field

[0001] The invention belongs to the technical field of computer networks, and in particular relates to a management system page layout method based on Vue. Background Art

[0002] In the information age, the importance of websites as information carriers is becoming increasingly prominent. As an open source JavaScript front-end framework, Vue is widely favored by developers due to its ease of use, flexibility and progressive features, and has become an important tool for front-end development. The global usage rate of Vue continues to rise, and it has occupied an important position in the field of front-end development.

[0003] In the process of Vue development management system, common parts (such as menus and bottom filing information) do not need to be developed repeatedly. In traditional development methods, common parts are usually written into layout files, while the middle area is custom developed. However, even with mature layout components (such as 24-column grids), developers still need to make a lot of style adjustments on this basis to achieve effects such as fixed titles and fixed heights. Especially in actual applications, some potential rules are often ignored when developing page layouts, resulting in a long development cycle, and due to different development habits, page effects are difficult to unify, which affects the user experience. For example, when there is too much content on a page, the title will scroll with the content by default, but some developers anticipated this problem and wrote styles in advance to ensure that the title is fixed in position and the content area scrolls. This resulted in the problem of inconsistent page effects. Summary of the invention

[0004] In view of this, the present invention aims to propose a management system page layout method based on Vue to at least solve one problem in the background technology.

[0005] To achieve the above object, the technical solution of the present invention is achieved as follows:

[0006] A management system page layout method based on Vue, comprising:

[0007] By creating a common component base-layout-row as an outer container, it is used to limit the area size and provide highly adaptive settings;

[0008] Create a common component base-layout-col as the internal grid, control the width through the span attribute and unify the styles of the title and content areas;

[0009] Register the base-layout-row and base-layout-col components as global components for developers to call directly.

[0010] Furthermore, the common component base-layout-row is created as an external container to limit the area size and provide highly adaptive settings, including:

[0011] Define component properties: autoHeight property, used to set whether the height is dynamically adjusted according to the internal content; gutter property, used to set the interval between grids, the default value is 20;

[0012] Set default width and height: The container width and height default to occupying the entire custom area.

[0013] Furthermore, the common component base-layout-row is created as an external container to limit the area size and provide highly adaptive settings, including:

[0014] Write logic inside the component: If autoHeight is true, dynamically adjust the height of the container by calculating the actual height of the content area; if autoHeight is false, use a fixed height.

[0015] Furthermore, the common component base-layout-col is created as the internal grid, the width is controlled by the span attribute, and the styles of the title and content areas are uniformly set, including:

[0016] Define component properties:

[0017] The span attribute is used to specify the number of columns occupied by the grid. It supports 1 / 24 columns and the default value is 24.

[0018] The showTitle attribute is used to control the display of the title;

[0019] noPadding, noBackground, and noBackgroundTitle attributes are used to adjust the margins and background color of the content area and title;

[0020] Write the grid layout logic:

[0021] Calculate the grid width based on the span value passed in, generate the style class, and ensure that the components can be correctly nested in the layout;

[0022] Use the standard 1 / 24 column division method and implement scalable grid combination through CSS;

[0023] Write styles for the title and content areas:

[0024] The style of the title part is implemented through fixed logic to ensure that it does not scroll with the content when the content exceeds the limit; the content area uses style control to display a scroll bar for the exceeded part.

[0025] Furthermore, the base-layout-row and base-layout-col components are registered as global components for developers to call directly, including centralized development of styles and logic within the two components, and code reusability is ensured through encapsulation:

[0026] base-layout-row defines the default style and logic of the entire outer container, including dynamic height adjustment and grid spacing;

[0027] The styles of the title and content area are defined in base-layout-col, including fixed title, scrolling content, and default grid width calculation.

[0028] Furthermore, after the component development is completed, the layout development is carried out in the following way:

[0029] Use base-layout-row to define the external layout area of ​​the page, and pass in custom properties to determine the area height and grid spacing;

[0030] Nest multiple base-layout-col components inside base-layout-row to set the width of each grid and whether to display the title;

[0031] Pass the title content and specific content through the slot to complete the page layout.

[0032] Furthermore, the present solution discloses an electronic device, including a processor and a memory that is communicatively connected to the processor and is used to store executable instructions of the processor, wherein the processor is used to execute the above-mentioned Vue-based management system page layout method.

[0033] Furthermore, the present solution discloses a server, comprising at least one processor, and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes a Vue-based management system page layout method.

[0034] Furthermore, the present solution discloses a computer-readable storage medium storing a computer program, which, when executed by a processor, implements a Vue-based management system page layout method.

[0035] Compared with the prior art, the Vue-based management system page layout method described in the present invention has the following beneficial effects:

[0036] (1) A management system page layout method based on Vue described in the present invention realizes automation and unification of page layout by developing common components base-layout-row and base-layout-col and registering them globally;

[0037] (2) The present invention discloses a Vue-based management system page layout method. The entire solution is designed in a componentized manner, which reduces repeated development work. At the same time, the layout style and logic are centrally managed, providing convenience for subsequent maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] The accompanying drawings constituting a part of the present invention are used to provide a further understanding of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the accompanying drawings:

[0039] Figure 1 A schematic diagram of a management system page layout method based on Vue according to an embodiment of the present invention;

[0040] Figure 2 The management system page layout rule described in the embodiment of the present invention;

[0041] Figure 3 Description of the base-layout-row component properties described in the embodiment of the present invention;

[0042] Figure 4 Description of the base-layout-col component properties described in the embodiment of the present invention. DETAILED DESCRIPTION

[0043] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.

[0044] The present invention will be described in detail below with reference to the accompanying drawings and in conjunction with embodiments.

[0045] This solution discloses a management system page layout method based on Vue, including:

[0046] By creating a common component base-layout-row as an outer container, it is used to limit the area size and provide highly adaptive settings;

[0047] Create a common component base-layout-col as the internal grid, control the width through the span attribute and unify the styles of the title and content areas;

[0048] Register the base-layout-row and base-layout-col components as global components for developers to call directly.

[0049] The common component base-layout-row is created as an outer container to limit the area size and provide highly adaptive settings, including:

[0050] Define component properties: autoHeight property, used to set whether the height is dynamically adjusted according to the internal content; gutter property, used to set the interval between grids, the default value is 20;

[0051] Set default width and height: The container width and height default to occupying the entire custom area.

[0052] The common component base-layout-row is created as an outer container to limit the area size and provide highly adaptive settings, including:

[0053] Write logic inside the component: If autoHeight is true, dynamically adjust the height of the container by calculating the actual height of the content area; if autoHeight is false, use a fixed height.

[0054] The common component base-layout-col is created as the internal grid, the width is controlled by the span attribute, and the styles of the title and content areas are uniformly set, including:

[0055] Define component properties:

[0056] The span attribute is used to specify the number of columns occupied by the grid. It supports 1 / 24 columns and the default value is 24.

[0057] The showTitle attribute is used to control the display of the title;

[0058] noPadding, noBackground, and noBackgroundTitle attributes are used to adjust the margins and background color of the content area and title;

[0059] Write the grid layout logic:

[0060] Calculate the grid width based on the span value passed in, generate the style class, and ensure that the components can be correctly nested in the layout;

[0061] Use the standard 1 / 24 column division method and implement scalable grid combination through CSS;

[0062] Write the title and content area styles:

[0063] The style of the title part is implemented through fixed logic to ensure that it does not scroll with the content when the content exceeds the limit;

[0064] The content area displays a scroll bar when it exceeds the limit through style control.

[0065] The base-layout-row and base-layout-col components are registered as global components for developers to call directly, including centralized development of styles and logic within the two components, and code reusability is ensured through encapsulation:

[0066] base-layout-row defines the default style and logic of the entire outer container, including dynamic height adjustment and grid spacing;

[0067] The styles of the title and content area are defined in base-layout-col, including fixed title, scrolling content, and default grid width calculation.

[0068] Furthermore, after the component development is completed, the layout development is carried out in the following way:

[0069] Use base-layout-row to define the external layout area of ​​the page, and pass in custom properties to determine the area height and grid spacing;

[0070] Nest multiple base-layout-col components inside base-layout-row to set the width of each grid and whether to display the title;

[0071] Pass the title content and specific content through the slot to complete the page layout.

[0072] In the specific implementation process, this plan summarizes the layout rules of the management system page. The specific plan includes:

[0073] First, create a common component base-layout-row as an external container. The component properties are as follows Figure 3 This component is mainly used to limit the size of the area. According to the size of the current project custom area, the default width and height are set for the size of base-layout-row so that it fills the entire custom area. Because there are multiple modules vertically in actual applications, you can set it according to the autoHeight property. When autoHeight is set to true, the height will be automatically calculated according to the content displayed in the area.

[0074] Next, create a common component base-layout-col as the internal grid. The component properties are as follows: Figure 4, this component consists of two parts, the title and the content area. The grid width can be set according to the span attribute. This component can form a more complex hybrid layout by arbitrarily expanding and combining the basic 1 / 24 columns. The default is 24. At the same time, set the title style and content area style (such as fixed title, display scroll bar after content exceeds, etc.). Set parameters for properties with higher flexibility, so that you can simply control whether to display the title and whether to set the background color.

[0075] Finally, the component is registered globally so that individual developers can use it directly without having to import it.

[0076] Those of ordinary skill in the art will appreciate that the units and method steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0077] In the several embodiments provided in the present application, it should be understood that the disclosed methods and systems can be implemented in other ways. For example, the division of the units described above is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. The above-mentioned units may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the embodiments of the present invention.

[0078] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention, and they should all be included in the scope of the claims and specification of the present invention.

[0079] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A management system page layout method based on Vue, characterized in that: include: By creating a common component base-layout-row as an outer container, it is used to limit the area size and provide highly adaptive settings; Create a common component base-layout-col as the internal grid, control the width through the span attribute and uniformly set the style of the title and content areas; Register the base-layout-row and base-layout-col components as global components for developers to call directly.

2. According to a Vue-based management system page layout method according to claim 1, it is characterized in that: The common component base-layout-row is created as an outer container to limit the area size and provide highly adaptive settings, including: Define component properties: autoHeight property, used to set whether the height is dynamically adjusted according to the internal content; gutter property, used to set the interval between grids, the default value is 20; Set default width and height: The container width and height default to occupying the entire custom area.

3. According to a Vue-based management system page layout method according to claim 1, it is characterized in that: The common component base-layout-row is created as an outer container to limit the area size and provide highly adaptive settings, including: Write logic inside the component: If autoHeight is true, dynamically adjust the height of the container by calculating the actual height of the content area; if autoHeight is false, use a fixed height.

4. According to a Vue-based management system page layout method according to claim 1, it is characterized in that: The common component base-layout-col is created as the internal grid, the width is controlled by the span attribute, and the styles of the title and content areas are uniformly set, including: Define component properties: The span attribute is used to specify the number of columns occupied by the grid. It supports 1 / 24 columns and the default value is 24. The showTitle attribute is used to control the display of the title; noPadding, noBackground, and noBackgroundTitle attributes are used to adjust the margins and background color of the content area and title; Write the grid layout logic: Calculate the grid width based on the span value passed in, generate the style class, and ensure that the components can be correctly nested in the layout; Use the standard 1 / 24 column division method and implement scalable grid combination through CSS; Write styles for the title and content areas: The style of the title part is implemented through fixed logic to ensure that it does not scroll with the content when the content exceeds the limit; The content area displays a scroll bar when it exceeds the limit through style control.

5. According to a Vue-based management system page layout method according to claim 1, it is characterized in that: The base-layout-row and base-layout-col components are registered as global components for developers to call directly, including centralized development of styles and logic within the two components, and code reusability is ensured through encapsulation: base-layout-row defines the default style and logic of the entire outer container, including dynamic height adjustment and grid spacing; The styles of the title and content area are defined in base-layout-col, including fixed title, scrolling content, and default grid width calculation.

6. According to a Vue-based management system page layout method according to claim 1, it is characterized in that: After the component development is completed, the layout development is carried out in the following way: Use base-layout-row to define the external layout area of ​​the page, and pass in custom properties to determine the area height and grid spacing; Nest multiple base-layout-col components inside base-layout-row to set the width of each grid and whether to display the title; Pass the title content and specific content through the slot to complete the page layout.

7. An electronic device, comprising a processor and a memory connected to the processor for storing instructions executable by the processor, characterized in that: The processor is used to execute a Vue-based management system page layout method as described in any one of claims 1-6 above.

8. A server, characterized in that: It includes at least one processor and a memory communicatively connected to the processor, wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the processor so that the at least one processor executes a Vue-based management system page layout method as described in any one of claims 1-6.

9. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the Vue-based management system page layout method described in any one of claims 1 to 6 is implemented.

Images