Custom configuration method and device of component, equipment and storage medium

By introducing pre-built dynamic loading components into the target project and customizing configuration and displaying configuration based on the load information entered by users, the problem of single configuration functions of existing component are solved, achieving a more comprehensive component application and a better user experience.

CN119556975APending Publication Date: 2025-03-04创优数字科技(广东)有限公司
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411704551.6
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-11-26
Publication Date
2025-03-04

AI Technical Summary

Technical Problem

The existing component configuration functions are relatively single, which cannot meet the needs of different application scenarios, resulting in a weak user experience.

Method used

By introducing pre-built dynamic loading components into the target project, the loading information passed by the user is obtained, and the components are configured and displayed according to the loading information, and responsively adjusted in combination with the screen size.

Benefits of technology

It realizes the customized configuration of components, taking into account both display information and display effects, making component applications more comprehensive and enhancing user experience.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119556975A_ABST
    Figure CN119556975A_ABST
Patent Text Reader

Abstract

The invention discloses a user-defined configuration method and device of a component, equipment and a storage medium, and the method comprises the steps: introducing a pre-constructed dynamic loading component into a target project, and obtaining loading information transmitted by a user; introducing the dynamic loading component into a loading page set by a user, and performing information configuration on the dynamic loading component according to the loading information to obtain a target component; performing display configuration on the target component; determining the size of a screen where the loaded page is located; and according to the screen size, performing responsive adjustment on the target component after the display configuration in the loaded page. According to the method, the dynamic loading component can be firstly introduced into the target project which wants to realize dynamic loading, the loading information transmitted by the user is acquired, information configuration is performed on the dynamic loading component according to the loading information, and then display configuration is performed, so that the display information and the display effect of the component can be considered at the same time, the component application is more comprehensive, and the user experience is improved. The user experience can be enhanced.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of component configuration technology, and specifically to a method, apparatus, device, and storage medium for custom configuration of a component. Background Technology

[0002] In the field of front-end development, as the scale and complexity of applications continue to grow, efficient component-based development has become a key strategy for building large-scale software systems. To fully leverage the advantages of components, effective component configuration methods are needed, and different application scenarios have different requirements for components.

[0003] Existing components have relatively limited configuration capabilities. For example, some loading components prioritize the display of icons over information, while others prioritize the display effect of icons over information. As a result, the application of these components is not comprehensive enough, leading to a poor user experience. Summary of the Invention

[0004] In view of this, this application provides a method, apparatus, device, and storage medium for custom configuration of components, which solves the problem that existing components have relatively simple configuration functions, resulting in insufficient application scope and poor user experience.

[0005] To achieve the above objectives, the following solution is proposed:

[0006] Firstly, a method for customizing a component, including:

[0007] Introduce a pre-built, dynamically loaded component into the target project and obtain the loading information passed in by the user;

[0008] The dynamically loaded component is introduced into the user-defined loading page, and the information of the dynamically loaded component is configured according to the loading information to obtain the target component;

[0009] Configure the display of the target component;

[0010] Determine the screen size of the loaded page;

[0011] Based on the screen size, the target components in the loaded page are responsively adjusted according to their display configuration.

[0012] Preferably, the construction process of the dynamically loaded component includes:

[0013] Choose a front-end framework;

[0014] Determine the various properties and triggering events received by the component;

[0015] Create the component's file and define its basic structure;

[0016] Define the component's color, font, and size;

[0017] Perform the test and determine if it passes;

[0018] If so, the construction is complete, and the dynamically loaded component is obtained.

[0019] Preferably, the step of introducing a pre-built dynamically loaded component into the target project includes:

[0020] Identify the project files in the target project that contain loading status indicators;

[0021] In each of the project files, the import statement is called to import pre-built, dynamically loaded components;

[0022] Register the dynamically loaded component.

[0023] Preferably, the step of configuring the dynamically loaded component according to the loading information to obtain the target component includes:

[0024] Obtain the loading icon, loading text, and icon rotation requirements from the loading information;

[0025] Use the loading icon as the display style for the dynamically loaded component;

[0026] The loading text is used as additional display information for the loading icon;

[0027] Based on the icon rotation requirements, the dynamically loaded component is defined to determine whether to rotate, thus obtaining the target component.

[0028] Preferably, configuring the display of the target component includes:

[0029] Determine the component rotation attribute value from the loading information;

[0030] If the component's rotation attribute value is rotation, then a rotation settings window is sent to the user, allowing the user to set the rotation period and rotation speed of the target component in the rotation settings window;

[0031] In response to an asynchronous request initiated by the user, the target component is rotated;

[0032] After the asynchronous request is processed, the rotation of the target component is stopped.

[0033] Preferably, the dynamically loaded component is defined with attributes, including: whether the component is displayed, the input custom icon, the input custom text, and whether the icon is rotated.

[0034] Secondly, a custom configuration device for a component includes:

[0035] The component module is introduced to import pre-built dynamically loaded components into the target project and obtain loading information passed in by the user.

[0036] The target component obtaining module is used to introduce the dynamically loaded component into the user-defined loading page, and to configure the information of the dynamically loaded component according to the loading information to obtain the target component;

[0037] The display configuration module is used to configure the display of the target component;

[0038] A screen size determination module is used to determine the screen size of the loaded page;

[0039] A responsive adjustment module is used to responsively adjust the target components in the loaded page after display configuration according to the screen size.

[0040] Preferably, the introduced component module includes:

[0041] The project file determination module is used to determine each project file in the target project that has a loading status indication;

[0042] The statement invocation module is used to invoke the import statement in each of the project files to import pre-built, dynamically loaded components;

[0043] The registration module is used to register the dynamically loaded components.

[0044] Thirdly, a custom configuration device for components, including memory and processor;

[0045] The memory is used to store programs;

[0046] The processor is configured to execute the program to implement the steps of the custom configuration method for the component as described in any of the first aspects.

[0047] Fourthly, a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of a custom configuration method for a component as described in any of the first aspects.

[0048] As can be seen from the above technical solution, this application introduces a pre-built dynamic loading component into the target project and obtains loading information passed in by the user; introduces the dynamic loading component into the loading page set by the user, and configures the dynamic loading component according to the loading information to obtain the target component; configures the display of the target component; determines the screen size of the loading page; and adjusts the target component in the loading page in a responsive manner according to the screen size. This application pre-builds a dynamic loading component, which users can first introduce into the target project where they want to implement dynamic loading, and then perform subsequent custom configurations. This involves obtaining the loading information passed in by the user, introducing the dynamic loading component into the loading page where the loading status needs to be displayed, configuring the dynamic loading component according to the loading information to obtain the target component, and then configuring the display. This approach simultaneously considers the display information and display effect of the component, making the component application more comprehensive and enhancing the user experience. Attached Figure Description

[0049] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0050] Figure 1 An optional flowchart of a custom configuration method for a component provided in an embodiment of this application;

[0051] Figure 2 A schematic diagram of a page loading provided in an embodiment of this application;

[0052] Figure 3 and Figure 4 These are all comparison diagrams provided in the embodiments of this application, showing the configuration of information for a component before and after configuration.

[0053] Figure 5 A schematic diagram of a component structure provided in an embodiment of this application;

[0054] Figure 6 A schematic diagram of the structure of a custom configuration device for a component provided in an embodiment of this application;

[0055] Figure 7 This is a schematic diagram of the structure of a custom configuration device for a component provided in an embodiment of this application. Detailed Implementation

[0056] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0057] This invention can be used in a wide variety of general-purpose or special-purpose computing environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor devices, distributed computing environments including any of the above devices, etc.

[0058] This invention provides a method for customizing a component. This method can be applied to various computer terminals or smart terminals, and its execution entity can be the processor or server of the computer terminal or smart terminal. The method flowchart is shown below. Figure 1 As shown, it specifically includes:

[0059] S1: Introduce a pre-built dynamically loaded component into the target project and obtain the loading information passed in by the user.

[0060] The target project in this application can refer to a front-end application project, such as a Vue project, a React project, etc. In the process of importing a pre-built dynamically loaded component, the component is first created in the src / components directory of the target project. The src / components directory is usually used to store the component files of the project, so the component is created here and then imported.

[0061] The loading information provided by the user refers to the information that the user wants to customize for the component. For example, the user can configure the appearance of the dynamically loaded component, the accompanying text (i.e., loading prompt text), and the component style. The appearance can be represented in the form of an image / icon, such as an SVG icon. The advantage of choosing an SVG icon is that it can be scaled up or down without loss of quality without pixelation, which is beneficial for the display of the component.

[0062] S2: The dynamically loaded component is introduced into the user-defined loading page, and the information of the dynamically loaded component is configured according to the loading information to obtain the target component.

[0063] The user-defined loading page refers to the page on which the user wants to apply this dynamically loaded component and also wants to customize its configuration. Therefore, the user can import the dynamically loaded component into the target project, then import it into the loading page, and then configure the information. This allows the user to customize the component and obtain a dynamically loaded component that meets their own requirements and expectations. For example... Figure 2 , Figure 2 The example displays a loading page, which is in the process of loading. A dynamic loading component (shown in the dashed box) is displayed in the middle of the page. This component's shape can be assumed to be the default shape. The shape and accompanying text can be replaced based on information from the user's loading information. This replacement process is essentially an information configuration process. This provides users with a more flexible customization option, allowing them to easily replace the component's shape or accompanying text with any desired appearance or text based on their needs or project requirements.

[0064] like Figure 3 and Figure 4 , Figure 3 and Figure 4 Both examples show a comparison of components before and after information configuration. Please refer to them. Figure 3 , Figure 3 The document configures the appearance information for dynamically loaded components; please refer to [the documentation / reference]. Figure 4 , Figure 4 The text associated with dynamically loaded components has been configured, changing "Loading" to "On its way!!".

[0065] The dynamically loaded component after the information configuration is completed serves as the target component.

[0066] S3: Configure the display of the target component.

[0067] In addition to configuring information for dynamically loaded components, this application also includes configuring the display of the target component obtained after the information configuration. The display configuration refers to configuring the display method of the target component, such as the rotation method of the target component, the dynamic loading method of the target component, etc. For example, rotating the target component clockwise indicates that the loading page is dynamically loading.

[0068] S4: Determine the screen size of the loaded page.

[0069] To enable the target component to adapt and run on different devices and screen sizes, such as desktop computer monitors, tablets, smartphones, and other mobile devices, and to provide a good user experience, this step determines the screen size of the loaded page and makes subsequent responsive adjustments based on this screen size.

[0070] S5: Based on the screen size, make responsive adjustments to the target components in the loaded page after display configuration.

[0071] Specifically, the width and position of the target component can be set using percentages or relative units, rather than fixed pixel values, so that the target component can be scaled proportionally to the screen size.

[0072] The top, left, right, bottom, and transform properties of the target component overlay can be adaptively adjusted. The overlay class uses absolute positioning (position: absolute;), but the comments remind component developers that they can adjust it according to the positioning method of the parent container to ensure that it can be displayed correctly on different screen sizes. If Flexbox layout is used (display: flex; justify-content: center; align-items: center;), it can ensure that the loaded content is horizontally and vertically centered in the container, which can improve the user experience.

[0073] As can be seen from the above technical solution, this application introduces a pre-built dynamic loading component into the target project and obtains loading information passed in by the user; introduces the dynamic loading component into the loading page set by the user, and configures the dynamic loading component according to the loading information to obtain the target component; configures the display of the target component; determines the screen size of the loading page; and adjusts the target component in the loading page in a responsive manner according to the screen size. This application pre-builds a dynamic loading component, which users can first introduce into the target project where they want to implement dynamic loading, and then perform subsequent custom configurations. This involves obtaining the loading information passed in by the user, introducing the dynamic loading component into the loading page where the loading status needs to be displayed, configuring the dynamic loading component according to the loading information to obtain the target component, and then configuring the display. This approach simultaneously considers the display information and display effect of the component, making the component application more comprehensive and enhancing the user experience.

[0074] For example, in front-end development practice, Element UI, as a widely used Vue.js UI component library, provides developers with many UI components, including dynamically loaded components, i.e., Loading components. While it can meet basic loading needs in most cases, it still has certain limitations in configuration. For instance, it cannot flexibly configure component information such as appearance and accompanying text. There may also be issues with text not displaying as expected. This is mainly because Element UI's Loading components may prioritize the component's appearance, such as rotation effects, rather than the appearance and accompanying text itself, thus lacking flexibility. Additionally, some Loading components focus more on appearance and accompanying text, easily neglecting the component's display effects, also lacking flexibility. This application, however, effectively balances these two aspects, providing a better user experience. The final target component obtained in this application, as an independent component, can be easily integrated into any Vue project without depending on other UI component libraries. Furthermore, the component structure is clear, easy to understand and extend, and users can add additional functionality as needed, such as a loading progress bar and various rotation effects.

[0075] The construction process of dynamically loading components in the method provided by this invention is described in detail below:

[0076] Choose a front-end framework;

[0077] Determine the various properties and triggering events received by the component;

[0078] Create the component's file and define its basic structure;

[0079] Define the component's color, font, and size;

[0080] Perform the test and determine if it passes;

[0081] If so, the construction is complete, and the dynamically loaded component is obtained.

[0082] Specifically, front-end frameworks such as React, Vue.js, and Angular can be chosen. It's necessary to determine the specifications and APIs of the selected framework to ensure a smoother component build process. During the build process, the component's interface needs to be defined, i.e., the component's inputs and outputs. Inputs refer to the various properties the component receives, and outputs refer to the events the component triggers. JavaScript, TypeScript, or other programming languages ​​can be used to create the component's logic. The component's functionality and requirements can also be defined, along with its HTML structure or template. The complexity of the structure depends on the component's purpose. Additionally, the component's appearance needs to be defined. CSS or other style languages ​​can be used to add styles to the component, including colors, fonts, sizes, etc., and advanced features such as variables and nesting rules can be provided. After the build is complete, testing is required to ensure the component functions correctly. This includes unit tests and integration tests. Performance optimizations can also be added to improve the component's performance. After completing the above process, the dynamically loaded component of this application is obtained.

[0083] The pre-built dynamically loaded component in this application includes the following attributes: whether the component is visible, the input custom icon (img), the input custom text (text), and whether the icon is rotated (spin). The input custom icon and input custom text attributes are associated with information configuration; users can configure the information of the dynamically loaded component based on the attribute values ​​defined for these two attributes. The icon rotation attribute is associated with display configuration; users can configure the display of the dynamically loaded component based on the attribute values ​​defined for this attribute.

[0084] In one example, the basic structure of the dynamically loaded component pre-built in this application is as follows: Figure 5 As shown. In Figure 5 In the code, the visible property is defined as "yes" for whether a component is visible, and the spin property is defined as "yes" for whether an icon is rotated.

[0085] The process of introducing pre-built dynamically loaded components into the target project in this application is described in detail below.

[0086] Identify the project files in the target project that contain loading status indicators;

[0087] In each of the project files, the import statement is called to import pre-built, dynamically loaded components;

[0088] Register the dynamically loaded component.

[0089] Specifically, you first need to identify the project files in the target project that have loading status indicators, such as the Vue file. Then, you need to use the import statement to import the pre-built dynamically loaded components. The import statement can be used to import and register functions, objects, variables, components, etc. You can register them in the components option. Successful registration means that the component has been successfully imported.

[0090] Alternatively, the component can be imported into components like the el-table component for use.

[0091] The following embodiments illustrate the steps of configuring the dynamically loaded component according to the loading information to obtain the target component in this application.

[0092] Obtain the loading icon, loading text, and icon rotation requirements from the loading information;

[0093] Use the loading icon as the display style for the dynamically loaded component;

[0094] The loading text is used as additional display information for the loading icon;

[0095] Based on the icon rotation requirements, the dynamically loaded component is defined to determine whether to rotate, thus obtaining the target component.

[0096] Specifically, loading icons refers to information that allows configuration of the component's appearance. This application links the value of the input custom icon's `img` attribute with whether the icon rotates (`spin`). If the user-input custom icon's `img` attribute is a GIF image, then the `spin` attribute is set to "no rotation"; if the user-input custom icon's `img` attribute is a PNG / JPG image, then the `spin` attribute is set to "rotate". This eliminates the need for the user to define the value of each attribute. Users can pass corresponding attribute values ​​via props to control the dynamic loading and display of component information.

[0097] In addition, you can adjust the duration, easing function, and other properties of component animations to achieve the desired visual effect.

[0098] After the information configuration is completed, the following describes the process of configuring the target component for display.

[0099] Determine the component rotation attribute value from the loading information;

[0100] If the component's rotation attribute value is rotation, then a rotation settings window is sent to the user, allowing the user to set the rotation period and rotation speed of the target component in the rotation settings window;

[0101] In response to an asynchronous request initiated by the user, the target component is rotated;

[0102] After the asynchronous request is processed, the rotation of the target component is stopped.

[0103] Specifically, the component's rotation attribute value is the same as the value of the icon's spin attribute. For better customization, if the component's rotation attribute value is set to "rotate," a rotation settings window is sent to the user's client page. The user can customize settings in this window, such as setting the target component's rotation period and speed. Then, the user can initiate an asynchronous request (such as an API call). In response to this request, the target component is rotated. Once the asynchronous request is processed (whether successfully or not), the rotation stops. This allows the component to be turned off when the rotation effect is not needed, or to precisely control the component's rotation behavior in specific scenarios.

[0104] The relevant code flow for configuring the target component for display can be shown below:

[0105]

[0106] Furthermore, this application can also add component attributes, such as the scoped attribute. This attribute can ensure that the appearance, matching text, and other styles of the target component are only applied to the target component and do not affect other components globally, thus avoiding global pollution and potential style conflicts.

[0107] and Figure 1 Corresponding to the method described above, embodiments of the present invention also provide a custom configuration device for components, used for... Figure 1 In the specific implementation of the method, the custom configuration device for the components provided in this embodiment of the invention can be used in computer terminals or various mobile devices, combined with Figure 6 This section introduces the custom configuration tools for components, such as... Figure 6 As shown, the device may include:

[0108] Component module 10 is introduced to import pre-built dynamically loaded components into the target project and obtain loading information passed in by the user.

[0109] The target component obtaining module 20 is used to introduce the dynamically loaded component into the user-defined loading page, and to configure the information of the dynamically loaded component according to the loading information to obtain the target component;

[0110] Display configuration module 30 is used to configure the display of the target component;

[0111] Screen size determination module 40 is used to determine the screen size of the loaded page;

[0112] The responsive adjustment module 50 is used to responsively adjust the target components in the loading page after display configuration according to the screen size.

[0113] As can be seen from the above technical solution, this application introduces a pre-built dynamic loading component into the target project and obtains loading information passed in by the user; introduces the dynamic loading component into the loading page set by the user, and configures the dynamic loading component according to the loading information to obtain the target component; configures the display of the target component; determines the screen size of the loading page; and adjusts the target component in the loading page in a responsive manner according to the screen size. This application pre-builds a dynamic loading component, which users can first introduce into the target project where they want to implement dynamic loading, and then perform subsequent custom configurations. This involves obtaining the loading information passed in by the user, introducing the dynamic loading component into the loading page where the loading status needs to be displayed, configuring the dynamic loading component according to the loading information to obtain the target component, and then configuring the display. This approach simultaneously considers the display information and display effect of the component, making the component application more comprehensive and enhancing the user experience.

[0114] In one example, the introducing component module 10 may include:

[0115] The project file determination module is used to determine each project file in the target project that has a loading status indication;

[0116] The statement invocation module is used to invoke the import statement in each of the project files to import pre-built, dynamically loaded components;

[0117] The registration module is used to register the dynamically loaded components.

[0118] Furthermore, embodiments of this application provide a custom configuration device for a component. Optionally, Figure 7 The hardware structure block diagram of the custom configuration device for the component is shown, with reference to... Figure 7 The hardware structure of a custom configuration device may include: at least one processor 01, at least one communication interface 02, at least one memory 03, and at least one communication bus 04.

[0119] In this embodiment, the number of processor 01, communication interface 02, memory 03 and communication bus 04 is at least one, and processor 01, communication interface 02 and memory 03 communicate with each other through communication bus 04.

[0120] Processor 01 may be a central processing unit (CPU), an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention.

[0121] Memory 03 may include high-speed RAM, and may also include non-volatile memory, such as at least one disk storage device.

[0122] The memory stores a program, which the processor can call. The program executes custom configuration methods for the following components, including:

[0123] Introduce a pre-built, dynamically loaded component into the target project and obtain the loading information passed in by the user;

[0124] The dynamically loaded component is introduced into the user-defined loading page, and the information of the dynamically loaded component is configured according to the loading information to obtain the target component;

[0125] Configure the display of the target component;

[0126] Determine the screen size of the loaded page;

[0127] Based on the screen size, the target components in the loaded page are responsively adjusted according to their display configuration.

[0128] Optionally, the refined and extended functions of the program can be found in the description of the custom configuration method of the components in the method embodiment.

[0129] This application embodiment also provides a storage medium that can store a program suitable for execution by a processor. When the program runs, it controls the device where the storage medium is located to execute a custom configuration method for the following components:

[0130] Introduce a pre-built, dynamically loaded component into the target project and obtain the loading information passed in by the user;

[0131] The dynamically loaded component is introduced into the user-defined loading page, and the information of the dynamically loaded component is configured according to the loading information to obtain the target component;

[0132] Configure the display of the target component;

[0133] Determine the screen size of the loaded page;

[0134] Based on the screen size, the target components in the loaded page are responsively adjusted according to their display configuration.

[0135] Specifically, the storage medium can be a computer-readable storage medium, which can be an electronic storage device such as flash memory, EEPROM (Electrically Erasable Programmable Read-Only Memory), EPROM, hard disk, or ROM.

[0136] Optionally, the refined and extended functions of the program can be found in the description of the custom configuration method of the components in the method embodiment.

[0137] Furthermore, the functional modules in the various embodiments of this disclosure can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part. If the function is implemented as a software functional 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 this disclosure, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a live streaming device, or a network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this disclosure.

[0138] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0139] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other.

[0140] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily 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 this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for customizing configuration of a component, characterized in that: include: Introduce the pre-built dynamic loading component into the target project and obtain the loading information passed in by the user; Introducing the dynamic loading component into the loading page set by the user, and configuring the dynamic loading component according to the loading information to obtain a target component; Performing display configuration on the target component; Determine the screen size of the loaded page; According to the screen size, the configured target component in the loading page is responsively adjusted.

2. The method according to claim 1, characterized in that The construction process of the dynamic loading component includes: Choose a front-end framework; Determine the attributes and trigger events that the component receives; Create component files and define the basic structure of the component; Define the color, font, and size of components; Conduct tests and determine whether the tests pass; If so, the build is complete and the dynamically loaded component is obtained.

3. The method according to claim 1, characterized in that The method of introducing the pre-built dynamic loading components into the target project includes: Determine each project file with a loading status prompt in the target project; In each of the project files, call the import statement to introduce the pre-built dynamic loading component; The dynamically loaded component is registered.

4. The method according to claim 1, characterized in that The step of configuring the dynamic loading component according to the loading information to obtain the target component includes: Obtaining a loading icon, loading text, and icon rotation requirements in the loading information; Using the loading icon as the display style of the dynamic loading component; Using the loading text as additional display information of the loading icon; Whether the dynamically loaded component is rotated is defined according to the icon rotation requirement to obtain the target component.

5. The method according to claim 1, characterized in that The display configuration of the target component includes: Determining a component rotation property value from the loaded information; If the component rotation attribute value is rotation, a rotation setting window is sent to the user, for the user to set the rotation period and rotation speed of the target component in the rotation setting window; In response to an asynchronous request initiated by a user, rotating the target component; After the asynchronous request processing is completed, the rotation of the target component is stopped.

6. The method according to any one of claims 1 to 5, characterized in that The dynamically loaded component is defined with properties, including: whether the component is displayed, the passed-in custom icon, the passed-in custom text, and whether the icon is rotated.

7. A custom configuration device for a component, characterized in that: include: The component module is introduced to introduce pre-built dynamic loading components into the target project and obtain the loading information passed in by the user; A target component obtaining module is used to introduce the dynamic loading component into the loading page set by the user, and configure the dynamic loading component according to the loading information to obtain the target component; A display configuration module, used to perform display configuration on the target component; A screen size determination module, used to determine the screen size of the loaded page; The responsive adjustment module is used to responsively adjust the target component after display configuration in the loading page according to the screen size.

8. The device according to claim 7, characterized in that The introduction component module includes: A project file determination module, used to determine each project file having a loading status prompt in the target project; A statement calling module, used for calling the import statement in each of the project files to introduce the pre-built dynamic loading components; The registration module is used to register the dynamically loaded component.

9. A custom configuration device for a component, characterized in that, including memory and processor; The memory is used to store programs; The processor is used to execute the program to implement each step of the component custom configuration method as described in any one of claims 1-6.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, each step of the component custom configuration method according to any one of claims 1 to 6 is implemented.