Card component layout method and device, storage medium and computer equipment

Abstract

According to the card component layout method and device, the storage medium and the computer equipment provided by the invention, the card components are loaded and initialized, and parameters transmitted by a parent component are received and analyzed to obtain position attributes; updating a dynamic class name of the card component according to the position attribute; determining a page layout style corresponding to the updated dynamic class name, and associating the page layout style with each sub-element in the card component, the sub-elements including a page head slot, a main body content slot, a page bottom slot and a picture element; and respectively receiving the content corresponding to each child element from the parent component, and rendering the content corresponding to each child element according to the page layout style. In this way, the layout style of the card assembly can be dynamically adjusted according to the parameters transmitted by the parent assembly, and the requirements for layout flexibility in different scenes are met.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a card component layout method, device, storage medium and computer equipment. Background Art

[0002] In Web development, Vue.js, as a progressive JavaScript framework, is popular for its component-based features. Vue.js encourages developers to split the interface into reusable components to improve development efficiency and maintainability. The el-card component is a component in Element-ui and a common element in Web UI design. It is used to display various types of information, such as article summaries, user profiles, product details, etc.

[0003] As web interface design continues to evolve and user experience requirements increase, developers need to be able to adjust the layout of elements within a card according to different situations. For example, in some scenarios, images and text may need to be displayed side by side, while in other scenarios, images may need to be placed above or below the text. However, traditional card components often have a fixed layout and cannot meet the needs for layout flexibility in different scenarios. Summary of the invention

[0004] The purpose of the present application is to solve at least one of the above-mentioned technical defects, especially the technical defect that the traditional card components in the prior art often have a fixed layout and cannot meet the requirements for layout flexibility in different scenarios.

[0005] In a first aspect, the present application provides a card component layout method, the method comprising:

[0006] Load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute;

[0007] Update the dynamic class name of the card component according to the position attribute;

[0008] Determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, including the page header slot, body content slot, page bottom slot, and image element;

[0009] Receive the content corresponding to each child element from the parent component and render the content corresponding to each child element according to the page layout style.

[0010] In one embodiment, the step of updating the dynamic class name of the card component according to the position attribute includes:

[0011] If the position parameter is the top position, update the dynamic class name of the card component to the top class name;

[0012] If the position parameter is the left position, update the dynamic class name of the card component to the left class name.

[0013] In one embodiment, the step of determining the page layout style corresponding to the updated dynamic class name includes:

[0014] If the updated dynamic class name is the top class name, the page layout style is vertical arrangement;

[0015] If the updated dynamic class name is the class name on the left, the page layout style is horizontal arrangement.

[0016] In one embodiment, the step of associating the page layout style with each sub-element in the card component includes:

[0017] After binding the page layout style to the root element of the card component, apply the page layout style to each child element of the card component.

[0018] In one embodiment, the step of rendering the content corresponding to each sub-element according to the page layout style includes:

[0019] Determine the relative positions of each sub-element according to the page layout style;

[0020] According to the relative positions of the sub-elements, adjust the order of the content corresponding to each sub-element;

[0021] According to the local style of the page and the relative position of each sub-element, set the spacing between the contents corresponding to each sub-element.

[0022] In one embodiment, the step of rendering the content corresponding to each sub-element according to the page layout style further includes:

[0023] Get the screen display size of the current device;

[0024] According to the local style of the page and the relative positions of each sub-element, the content corresponding to the image element is scaled, and the width and height of the content corresponding to the page header slot, the content corresponding to the body content slot, and the content corresponding to the page bottom slot are adjusted according to the remaining space of the page.

[0025] In one embodiment, the content corresponding to the picture element includes a picture and a picture description; and the method further includes:

[0026] If the image corresponding to the image element fails to be displayed, only the image description corresponding to the image element is displayed.

[0027] In a second aspect, the present application provides a card assembly layout device, the device comprising:

[0028] The position attribute determination module is used to load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute;

[0029] Dynamic class name update module, used to update the dynamic class name of the card component according to the position attribute;

[0030] A page layout style determination module is used to determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, including the page header slot, the body content slot, the page bottom slot and the image element;

[0031] The content rendering module is used to receive the content corresponding to each child element from the parent component and render the content corresponding to each child element according to the page layout style.

[0032] In a third aspect, the present application provides a storage medium: the storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the card component layout method in any of the above embodiments.

[0033] In a fourth aspect, the present application provides a computer device, comprising: one or more processors, and a memory;

[0034] The memory stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the steps of the card component layout method in any of the above embodiments are performed.

[0035] It can be seen from the above technical solutions that the embodiments of the present application have the following advantages:

[0036] In the card component layout method, device, storage medium and computer equipment provided by the present application, by dynamically adjusting the layout style of the card component according to the parameters passed in by the parent component, the developer can easily adjust the page layout according to different scenario requirements, and by using the combination of slots and dynamic layout, the developer can easily expand and adjust the functions of the component. At the same time, by using dynamic class names and layout styles, developers can flexibly implement multiple layout requirements in the same component without creating multiple different components, thereby improving the reusability of the component, reducing code redundancy, and thus improving development efficiency and maintainability. In addition, the layout style is separated from the component structure, and the developer only needs to pass in the required properties to achieve the desired layout effect, thereby reducing the coupling of the code and improving the maintainability and scalability of the code. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] In order to more clearly illustrate the embodiments of the present application 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 application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0038] Figure 1 A schematic diagram of a process flow of a card component layout method provided in an embodiment of the present application;

[0039] Figure 2 An example diagram of the card component code structure provided in an embodiment of the present application;

[0040] Figure 3 An example diagram of the steps of the card component layout method provided in an embodiment of the present application;

[0041] Figure 4 This is a preview of the effect provided by the embodiment of the present application;

[0042] Figure 5 A schematic diagram of the structure of a card assembly layout device provided in an embodiment of the present application;

[0043] Figure 6 A schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0044] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0045] In the existing methods, there are already some similar card component implementation solutions, but they often have the following shortcomings. First, the layout is fixed. Many card components only support fixed layout methods, such as vertical layout or horizontal layout, and cannot be dynamically adjusted according to the input parameters; second, the degree of customization is low. Although some components support a certain degree of customization, they usually require complex configuration and are not convenient to use; then, there is a lack of slot mechanism. Some card components do not make full use of the slot mechanism, making it difficult to insert custom content into the card; finally, the style is coupled with the logic. The style and logic of some components are tightly coupled together, which is not conducive to style modification and expansion.

[0046] Based on this, the present application provides a card component layout method. The following embodiments are described by taking the method applied to a computer device as an example. It can be understood that the computer device can be any device with data processing functions, including but not limited to a single server, a server cluster, a personal laptop computer, a desktop computer, etc. Figure 1 As shown, the method may include the following steps:

[0047] S101: Load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute.

[0048] Among them, in software development, especially web or mobile application development, the card component is a UI (UserInterface) element used to display information in the form of cards, such as article summaries, product lists, user information, etc. It usually contains elements such as titles, descriptions, pictures, etc., and is arranged in a visually attractive way. In the component-based programming framework, the parent component refers to the component that is directly above the current component in the component tree. The parent component can pass data or properties to the child component, and can also receive messages or events from the child component. Parameters are variables passed to functions, methods, or programs to control their behavior or change their output. In component-based programming, parent components can pass parameters to child components through attributes. Position attributes refer to attributes that describe the position of a card component in a page or layout.

[0049] In this step, when the card component is loaded, the code and resources of the card component are read, such as HTML, CSS, JavaScript files and images. Once the code and resources of the card component are loaded, initialization operations can be performed. For example, the default property values ​​of the component, such as style, size, etc., can be set, and some startup logic may be included, such as checking whether the dependencies have been loaded. When the parent component passes parameters to the card component, these parameters are received through the communication mechanism between components, such as React's props, Vue's props, etc. The process of parsing parameters can interpret and process the received data to extract the information required by the card component, which can include operations such as converting strings to numbers and parsing JSON strings into objects. After parsing the parameters passed by the parent component, extract the property values ​​related to the position, such as top, left, margin, etc.

[0050] It can be understood that by loading, it is possible to ensure that all necessary resources are in place; by initialization, it is possible to ensure that the component is in a known and predictable state, laying the foundation for subsequent operations. Receiving parameters passed in by the parent component allows the card component to adjust its behavior or display content according to external conditions. Parsing these parameters is to extract useful information from them so that the card component can perform its duties correctly, which can improve the flexibility and reusability of the application. By obtaining the position attribute, the position of the card component in the page or layout can be accurately calculated and rendered accordingly, which helps to achieve accurate and consistent UI layout and improve user experience.

[0051] S102: Update the dynamic class name of the card component according to the position attribute.

[0052] Among them, in web development, class names are used to specify the style of elements. Dynamic class names mean that these class names can be changed dynamically at runtime according to certain conditions or variables, thereby changing the style of the element.

[0053] In this step, after the position attribute is determined, an update operation is performed, for example, modifying the class name attribute on the DOM (Document Object Model) element of the card component. If JavaScript is used, methods such as element.classList.add(), element.classList.remove(), or element.className = "..." can be used to add, delete, or replace class names. During the update process, the class names to be used are dynamically determined based on the value of the position attribute. Some logical judgment or mapping operations can be performed. For example, based on the value of the position attribute, if the card component is determined to be at the top of the page, the "top-aligned" class name is added; if the card component is determined to be at the bottom, the "bottom-aligned" class name is added.

[0054] It can be understood that by updating the dynamic class name according to the position attribute, developers can dynamically change the appearance of elements according to different layout conditions or user interactions without having to write a large number of static style rules to better adapt to different layout requirements.

[0055] S103: Determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, the sub-elements including the page header slot, the body content slot, the page bottom slot and the image element.

[0056] Among them, page layout style refers to the CSS style rules that define how page elements are arranged and displayed, which can include element size, margins, padding, alignment, etc. In component-based programming, slots are a technology that distributes content to specified locations of components. It allows parent components to insert HTML or component content into child components without directly modifying the template of the child component. The page header slot, body content slot, and page footer slot refer to the parts of the card component used to display different content areas. Child elements refer to the various parts inside the card component, such as the page header, body content, page footer, and image elements.

[0057] In this step, first find the corresponding CSS style rules according to the updated dynamic class name. For example, you can search for a selector that matches the class name in the CSS file and obtain the style declaration associated with it. Once the page layout style is determined, apply these styles to the corresponding child elements in the card component. For example, you can traverse the DOM structure of the card component, find the DOM elements corresponding to the page header slot, the body content slot, the page bottom slot, and the image element, and associate the previously obtained styles to these elements.

[0058] It can be understood that determining the page layout style corresponding to the updated dynamic class name is to ensure that the card component can correctly display its content and layout according to the current state or condition, which helps to improve the flexibility and responsiveness of the application and enable the user interface to adapt to different scenarios and needs. The page layout style is associated with each sub-element in the card component to achieve precise layout and style control within the component. By associating styles with specific sub-elements, it can be ensured that each part is displayed as expected, thereby improving the readability and aesthetics of the user interface.

[0059] S104: receiving the content corresponding to each child element from the parent component respectively, and rendering the content corresponding to each child element according to the page layout style.

[0060] In this step, data passed from the parent component to the child component can be received by parsing HTML documents and JavaScript code. Once the data is received, determine how to render the data according to the CSS style rules associated with the card component, including determining the size, position, color, font and other attributes of each child element to ensure that they conform to the expected page layout style. After determining the style and content of each child element, render this information to the DOM tree. For example, create or update DOM elements and insert them into the correct location in the page. If a front-end framework is used, this process can be accomplished through virtual DOM and efficient DOM update algorithms to improve performance and reduce unnecessary redrawing and reflowing.

[0061] It can be understood that receiving the content corresponding to the child element is to pass data from the parent component to the child component so that the child component can render its internal structure and content based on this data, which helps to achieve code reuse and modularization, making the application easier to develop and maintain. Rendering according to the page layout style is to ensure that the arrangement and display of page elements meet the design requirements. By applying style rules, you can control the size, margins, padding, alignment and other attributes of the element to create an expected page layout.

[0062] In the above embodiment, by dynamically adjusting the layout style of the card component according to the parameters passed in by the parent component, the developer can easily adjust the page layout according to different scenario requirements, and by using the combination of slots and dynamic layout, the developer can easily expand and adjust the functions of the component. At the same time, by using dynamic class names and layout styles, developers can flexibly implement multiple layout requirements in the same component without creating multiple different components, which improves the reusability of the component, reduces code redundancy, and thus improves development efficiency and maintainability.

[0063] In one embodiment, the step of updating the dynamic class name of the card component according to the position attribute includes:

[0064] If the position parameter is the top position, update the dynamic class name of the card component to the top class name;

[0065] If the position parameter is the left position, update the dynamic class name of the card component to the left class name.

[0066] Among them, the top class name is used to define the style when the card component is at the top of the page, and can contain style attributes related to the top position, such as position: fixed; top: 0;, etc. The left class name is similar to the top class name, and is used to define the style when the card component is on the left side of the page, and can contain style attributes related to the left position, such as position: fixed; left: 0;, etc.

[0067] Specifically, check the value of the position parameter. If the value is equal to "top position", the dynamic class name of the card component can be modified to add or replace it with the top class name. After that, the style application can be triggered to change the appearance and layout of the card component. Similar to the processing of the top position, check whether the position parameter is equal to "left position". If so, perform a similar update operation, but change the dynamic class name to the left class name.

[0068] In this embodiment, the position parameter is a key factor in controlling the display position of the card component. By updating the dynamic class name according to the position parameter, it can be ensured that the card component is always displayed in the specified position with the correct style and layout, so that the layout and style of the card component are closely related to the page structure, which helps to maintain the consistency and aesthetics of the page. Separating the style and layout logic from the card component and managing it through dynamic class names can reduce the coupling of the code and improve the maintainability and scalability of the interface. By simply changing the position parameter and the corresponding dynamic class name, the card component can be easily placed on different pages or in different positions on the page to meet different display requirements.

[0069] In one embodiment, the step of determining the page layout style corresponding to the updated dynamic class name includes:

[0070] If the updated dynamic class name is the top class name, the page layout style is vertical arrangement;

[0071] If the updated dynamic class name is the class name on the left, the page layout style is horizontal arrangement.

[0072] Among them, vertical arrangement is to arrange the elements from top to bottom. Horizontal arrangement is the opposite of vertical arrangement, which is a layout method of arranging elements from left to right or from right to left.

[0073] Specifically, check whether the current class name of the card component is equal to the top class name. If so, find the page layout style rules associated with the top class name, which define the layout method for vertical arrangement. Once it is determined that the layout style for vertical arrangement should be applied, modify the style of the card component to reflect this arrangement, including setting the display property of the element to block or flex, and adjusting properties such as margins and padding to ensure that the elements are stacked vertically. Similar to the processing of the top class name, check whether the class name is equal to the left class name. If so, find the page layout style rules associated with the left class name, which define the layout method for horizontal arrangement. For horizontal arrangement, modify the style of the card component to reflect this arrangement, including setting the display property of the element to flex, and adjusting properties such as width and spacing of the elements to ensure that they are displayed side by side.

[0074] In this embodiment, by changing the class name, the layout style of the card component can be easily switched without modifying the code structure or writing additional code, which improves the reusability and maintainability of the code. Separating the layout logic from the style sheet and managing it through dynamic class names can simplify the code structure and reduce redundancy and errors.

[0075] In one embodiment, the step of associating the page layout style with each sub-element in the card component includes:

[0076] After binding the page layout style to the root element of the card component, apply the page layout style to each child element of the card component.

[0077] Among them, in component-based development, the root element refers to the outermost element of the card component.

[0078] Specifically, once the page layout style is determined, the style rules of the page layout style are associated with the root element of the card component. This can be achieved by modifying the style properties of the root element or directly applying inline styles to the root element. Once the page layout style is bound to the root element of the card component, it needs to be applied to each child element. For example, if the page layout style is global and the child element inherits certain style rules of the root element, these styles are automatically applied to the child element; if a specific layout style needs to be specified for the child element, additional style class names or inline styles can be applied to the child element.

[0079] In this embodiment, binding the page layout style to the root element of the card component can ensure that the entire component has a consistent appearance and layout, and can make the modification and update of the style easier and more centralized, because only the style rule of the root element needs to be changed to affect the entire component. Applying the page layout style to the child elements is to achieve more refined layout control. By applying styles to the child elements, it can be ensured that they are arranged and displayed in the desired way within the card component, thereby improving the user experience and usability of the interface.

[0080] In one embodiment, the step of rendering the content corresponding to each sub-element according to the page layout style includes:

[0081] Determine the relative positions of each sub-element according to the page layout style;

[0082] According to the relative positions of the sub-elements, adjust the order of the content corresponding to each sub-element;

[0083] According to the local style of the page and the relative position of each sub-element, set the spacing between the contents corresponding to each sub-element.

[0084] Specifically, the CSS style sheet can be parsed, and the relative positions between the various sub-elements of the card component can be determined according to the layout style rules therein. For example, the positions of the sub-elements can be arranged using positioning attributes, Flexbox, or Grid layout techniques. After the relative positions of the sub-elements are determined, the arrangement order of the sub-element contents is adjusted according to the HTML structure or the order attribute of CSS. Finally, the spacing between the sub-element contents is set according to the local style of the page and the relative positions between the sub-elements. For example, CSS attributes such as margin and padding can be used to control the spatial distance between elements. The values ​​of these attributes can be fixed or relative, depending on the design requirements and layout context.

[0085] In this embodiment, determining the relative positions of sub-elements ensures that the page elements can be arranged and displayed as expected. Adjusting the order of sub-element content can change the information hierarchy and visual focus of the page, thereby guiding the user's attention and improving the user experience. Setting the spacing between sub-element content can distinguish different content blocks, reduce visual clutter, and help users better understand the page information.

[0086] In one embodiment, the step of rendering the content corresponding to each sub-element according to the page layout style further includes:

[0087] Get the screen display size of the current device;

[0088] According to the local style of the page and the relative positions of each sub-element, the content corresponding to the image element is scaled, and the width and height of the content corresponding to the page header slot, the content corresponding to the body content slot, and the content corresponding to the page bottom slot are adjusted according to the remaining space of the page.

[0089] The remaining page space refers to the space left on the page that can be used for layout of other elements after the space for the image element is allocated.

[0090] Specifically, when the page is loaded, the current screen display size can be obtained through JavaScript's window.innerWidth and window.innerHeight properties or similar APIs. After obtaining the screen display size, determine whether the image element needs to be scaled based on the page local style and the relative position between the child elements. If necessary, calculate a suitable scaling ratio and apply the scaling ratio through CSS's width, height attributes or transform:scale() function. For the page header slot, body content slot, and page bottom slot, dynamically adjust the width and height of these slot contents based on the remaining space and the page local style. Specifically, the size of the available space can be calculated, the appropriate size can be assigned to each slot, and the spacing and layout between them can be ensured to meet the design requirements. The adjustment operation may involve CSS's width, height, margin, padding and other attributes, and may use layout technologies such as Flexbox and Grid to achieve more complex layout effects.

[0091] In this embodiment, different devices have different screen sizes and resolutions. By obtaining the screen display size, the page layout and element size can be dynamically adjusted to ensure that the page can be well displayed and interactive on different devices. Scaling the image elements is to adapt to different screen sizes and layout requirements. The original size of the image may not be able to maintain a good display effect on all devices. Through the scaling operation, it can be ensured that the image can be displayed at a suitable size on different devices while maintaining a good visual effect and user experience. The width and height of the content corresponding to the page slot are adjusted to achieve a more flexible and adaptive layout design. As an important part of the page layout, the size and position of the slot content have an important impact on the overall layout. By dynamically adjusting the size of the slot content, it can be ensured that the page can maintain a reasonable layout structure and visual balance on different devices and screen sizes, thereby improving the user experience and the usability of the page.

[0092] In one embodiment, the content corresponding to the picture element includes a picture and a picture description; the method further includes:

[0093] If the image corresponding to the image element fails to be displayed, only the image description corresponding to the image element is displayed.

[0094] Specifically, when trying to load and display an image in a page, check whether the image is successfully loaded. If the image cannot be loaded, only the image description associated with the image element is displayed. For example, the image element can be hidden or removed, and the image description element can be displayed or made visible.

[0095] In this embodiment, when a picture cannot be displayed, the page can be downgraded to provide a picture description instead of completely crashing or displaying an error message, thereby enhancing the fault tolerance and stability of the page.

[0096] To facilitate understanding of the solution of the present application, specific examples are provided below for illustration.

[0097] like Figure 2 The following is an example diagram of the card component code structure. This example diagram shows the structure and main properties of the MinisoCard component. Position: top / left, the position means that the image and text are arranged up and down / left and right. The default is up and down. Figure 3 This is an example of the steps of the card component layout method. First, the component starts loading; then, read and parse props (position attribute, the default value is "top"), and initialize data (currently an empty object); then, render the template, including creating an el-card element and assigning it a "box-card" class name, creating an internal div element and dynamically adding a "top-style" or "left-style" class name according to the position value, rendering the header slot content, inserting an image element, such as "@ / assets / images / head_img.png", and then rendering the content slot content and the footer slot content; then, perform dynamic style rendering; finally, the component rendering is completed and displayed on the page. The effect preview is as follows Figure 4 shown.

[0098] For dynamic style rendering, the code in HTML is as follows:

[0099]

[0100] In the above code, <div :class="{ 'top-style': position === 'top', 'left-style': position === 'left',}">, this line creates a element, and its class name will change dynamically according to the value of position. If position is "top", then There will be a class name of top-style; if position is "left", then There will be a class name of left-style.

[0101] <slot name="header">< / slot> , <slot name="content">< / slot> , <slot name="footer">< / slot> , these three lines of code are slots, they are used to place other content. For example, you can put a title in the header slot, the body of the card in the content slot, and an ending in the footer slot.

[0102] This line of code inserts an image. The source file of the image is @ / assets / images / head_img.png. The alt attribute is used to describe the image. If the image cannot be displayed, the browser will display the text in the alt.

[0103] .top-style: If If it has the class name top-style, it will use this style. The content is vertically centered and arranged in columns.

[0104] .top-style img: This style is specifically for If the picture in With the class name top-style, there will be a 10px gap below the image.

[0105] .left-style: If If the class name is left-style, it will use this style. Center the content horizontally.

[0106] .left-style img: This style is specifically for If the picture in With the class name left-style, there will be a 10px gap on the right side of the image.

[0107] Based on this, the adaptive layout of the card is encapsulated into a Vue component, so that the adaptive layout effect can exist as an independent and reusable unit. In this way, developers can easily introduce the adaptive layout effect of the card at any location in the project, just like using other Vue components. And by receiving the relative position 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 the errors caused by modifying the style, but also makes the component easier to maintain and expand. In addition, using the slot mechanism of Vue, the parent component is allowed to insert custom content into the component. In this way, the card can be seamlessly integrated with other elements or components on the page, further improving the reusability and flexibility of the component. At the same time, 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.

[0108] The following describes the card assembly layout device provided in the embodiment of the present application. The card assembly layout device described below and the card assembly layout method described above can be referred to in correspondence with each other. Figure 5 As shown, the present application provides a card assembly layout device, the device comprising:

[0109] The position attribute determination module 201 is used to load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute;

[0110] A dynamic class name updating module 202, used to update the dynamic class name of the card component according to the position attribute;

[0111] The page layout style determination module 203 is used to determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, the sub-elements including the page header slot, the body content slot, the page bottom slot and the image element;

[0112] The content rendering module 204 is used to receive the content corresponding to each child element from the parent component, and render the content corresponding to each child element according to the page layout style.

[0113] In one embodiment, the dynamic class name update module 202 includes:

[0114] A first dynamic class name updating unit, used for updating the dynamic class name of the card component to the top class name if the position parameter is the top position;

[0115] The second dynamic class name updating unit is used to update the dynamic class name of the card component to the left class name if the position parameter is the left position.

[0116] In one embodiment, the page layout style determination module 203 includes:

[0117] A first page layout style determination unit, configured to determine that if the updated dynamic class name is a top class name, the page layout style is vertical arrangement;

[0118] The second page layout style determining unit is used to determine that if the updated dynamic class name is the left class name, the page layout style is horizontal arrangement.

[0119] In one embodiment, the page layout style determination module 203 includes:

[0120] The page layout style association unit is used to bind the page layout style to the root element of the card component and then apply the page layout style to each child element of the card component.

[0121] In one embodiment, the content rendering module 204 includes:

[0122] A relative position determination unit, used to determine the relative positions between the sub-elements according to the page layout style;

[0123] An arrangement order adjustment unit, used to adjust the arrangement order of the content corresponding to each sub-element according to the relative positions between the sub-elements;

[0124] The spacing setting unit is used to set the spacing between the contents corresponding to each sub-element according to the local style of the page and the relative positions between each sub-element.

[0125] In one embodiment, the content rendering module 204 further includes:

[0126] A screen display size acquisition unit, used to acquire the screen display size of the current device;

[0127] The content size adjustment unit is used to scale the content corresponding to the image element according to the local style of the page and the relative positions between each sub-element, and to adjust the width and height of the content corresponding to the page header slot, the content corresponding to the body content slot, and the content corresponding to the page bottom slot according to the remaining space of the page.

[0128] In one embodiment, the content corresponding to the picture element includes a picture and a picture description; the device further includes:

[0129] The picture description display module is used to display only the picture description corresponding to the picture element if the picture corresponding to the picture element fails to be displayed.

[0130] In one embodiment, the present application also provides a storage medium storing computer-readable instructions. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the card component layout method described in any of the above embodiments.

[0131] In one embodiment, the present application also provides a computer device having computer-readable instructions stored therein. When the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the card component layout method as described in any one of the above embodiments.

[0132] Indicatively, if Figure 6 As shown, Figure 6 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of the present application. The computer device 300 may be provided as a server. Figure 6 The computer device 300 includes a processing component 302, which further includes one or more processors, and a memory resource represented by a memory 301 for storing instructions executable by the processing component 302, such as an application. The application stored in the memory 301 may include one or more modules, each corresponding to a set of instructions. In addition, the processing component 302 is configured to execute instructions to perform the card component layout method of any of the above embodiments.

[0133] The computer device 300 may further include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate based on an operating system stored in the memory 301, such as Windows Server TM, Mac OS X TM, Unix TM, Linux TM, Free BSD TM, or the like.

[0134] Those skilled in the art will understand that Figure 6 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0135] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the term "include", "comprise" or any other variant thereof is intended to cover non-exclusive inclusion, so that the process, method, article or equipment including a series of elements not only includes those elements, but also includes other elements not clearly listed, or also includes elements inherent to such process, method, article or equipment. In the absence of more restrictions, the elements limited by the sentence "include one..." do not exclude the existence of other identical elements in the process, method, article or equipment including the elements. Herein, "one", "one", "said", "the" and "it" may also include plural forms, unless the context clearly indicates another way. A plurality refers to at least two cases, such as 2, 3, 5 or 8, etc. "And / or" includes any and all combinations of the relevant listed items.

[0136] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can refer to each other.

[0137] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A card component layout method, characterized in that: The method comprises: Load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute; According to the position attribute, updating the dynamic class name of the card component; Determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, the sub-elements including a page header slot, a body content slot, a page bottom slot, and a picture element; The content corresponding to each of the child elements is received from the parent component respectively, and the content corresponding to each of the child elements is rendered according to the page layout style.

2. The card component layout method according to claim 1, characterized in that: The step of updating the dynamic class name of the card component according to the position attribute includes: If the position parameter is the top position, the dynamic class name of the card component is updated to the top class name; If the position parameter is the left position, the dynamic class name of the card component is updated to the left class name.

3. The card component layout method according to claim 2, characterized in that: The step of determining the page layout style corresponding to the updated dynamic class name includes: If the updated dynamic class name is the top class name, the page layout style is vertical arrangement; If the updated dynamic class name is the class name on the left, the page layout style is horizontal arrangement.

4. The card component layout method according to claim 1, characterized in that: The step of associating the page layout style with each sub-element in the card component includes: After binding the page layout style to the root element of the card component, the page layout style is applied to each of the child elements of the card component.

5. The card component layout method according to claim 1, characterized in that: The step of rendering the content corresponding to each of the sub-elements according to the page layout style includes: Determining the relative positions of the sub-elements according to the page layout style; According to the relative positions of the sub-elements, the arrangement order of the content corresponding to each sub-element is adjusted; The spacing between the contents corresponding to the sub-elements is set according to the relative positions between the local style of the page and the sub-elements.

6. The card component layout method according to claim 5, characterized in that: The step of rendering the content corresponding to each of the sub-elements according to the page layout style also includes: Get the screen display size of the current device; According to the local style of the page and the relative positions between each of the sub-elements, the content corresponding to the image element is scaled, and the width and height of the content corresponding to the page header slot, the content corresponding to the main content slot, and the content corresponding to the page bottom slot are adjusted according to the remaining space of the page.

7. The card assembly layout method according to any one of claims 1 to 6, characterized in that: The content corresponding to the picture element includes a picture and a picture description; the method further includes: If the image corresponding to the image element fails to be displayed, only the image description corresponding to the image element is displayed.

8. A card assembly layout device, characterized in that: The device comprises: The position attribute determination module is used to load and initialize the card component, and receive and parse the parameters passed in by the parent component to obtain the position attribute; A dynamic class name updating module, used to update the dynamic class name of the card component according to the position attribute; A page layout style determination module, used to determine the page layout style corresponding to the updated dynamic class name, and associate the page layout style with each sub-element in the card component, wherein the sub-elements include a page header slot, a body content slot, a page bottom slot, and a picture element; The content rendering module is used to receive the content corresponding to each of the child elements from the parent component, and render the content corresponding to each of the child elements according to the page layout style.

9. A storage medium, characterized in that: The storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by one or more processors, the one or more processors execute the steps of the card component layout method as described in any one of claims 1 to 7.

10. A computer device, characterized in that: include: one or more processors, and memory; The memory stores computer-readable instructions, and when the computer-readable instructions are executed by the one or more processors, the steps of the card component layout method according to any one of claims 1 to 7 are performed.

Images