Popup box component configuration calling method and device, equipment and storage medium

By defining constructors and middleware to dynamically generate case instances of the frame component, the problem of code complexity and high maintenance costs caused by traditional frame component creation methods is solved, and the simplified call and efficient reuse of frame components is realized, and the development is improved. Efficiency and code scalability.

CN119149027APending Publication Date: 2024-12-17CHINA TELECOM DIGITAL INTELLIGENCE TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411169178.9
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-08-23
Publication Date
2024-12-17

AI Technical Summary

Technical Problem

The creation of traditional frame components leads to code complexity, high maintenance costs and poor reusability, low development efficiency, and difficulty in quickly positioning and maintaining specific functions or component code.

Method used

By defining constructors and middleware, the case of the pop-up component is dynamically generated based on pre-set parameter objects, including the pop-up style configuration items, business components and parameters passed to the sub-components, providing methods for opening and closing of the pop-up frames, using common functions for Processing to achieve complete decoupling of the pop-up frame and the business page.

Benefits of technology

It simplifies the calling method of the pop-up frame components, improves code reusability and scalability, reduces code coupling, and allows developers to avoid writing a large amount of logical code to achieve diversified pop-up frame display and business function requirements.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119149027A_ABST
    Figure CN119149027A_ABST
Patent Text Reader

Abstract

The invention relates to a pop-up box component configuration calling method and device, equipment and a storage medium. The method comprises the steps of compiling a pop-up box assembly according to a parameter object; compiling middleware by defining a constructor function; the constructor is used for dynamically generating a pop-up box component instance according to the parameter object; the pop-up box component instance comprises attributes and methods; the attributes comprise pop-up box style configuration items, business components and parameters transmitted to the sub-components; the method comprises a pop-up box opening method and a pop-up box closing method. When a pop-up box opening operation is triggered, a predefined general function is utilized to call middleware, the middleware is utilized to receive and process a parameter object, a corresponding pop-up box component instance is dynamically generated, a pop-up box opening method is utilized to introduce a business component and business data, and the business component and the business data are mounted on the pop-up box component instance in a combined manner. And generating a pop-up HTML structure and displaying the pop-up HTML structure on the current By adopting the method, the calling mode of the pop-up box component can be simplified, the code reusability is improved, and the expandability of the pop-up box component is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, device, equipment and storage medium for configuring and calling a pop-up component. Background Art

[0002] In front-end development, the pop-up window component is a common interactive element used to display information, fill in forms, add, delete, modify and query operations, etc. The traditional way to create a pop-up window component often requires writing a large amount of page structure and logic code in the current business page, so that the pop-up window content independent of the business is mixed with the original business page.

[0003] This approach makes the page code complex and difficult to maintain, which may lead to the following unavoidable problems in development: (1) Decreased code readability: When the pop-up component code is directly mixed with the business page code, the page structure is complex. A page may contain business logic, the HTML structure of the pop-up, CSS style, and JavaScript logic at the same time. The amount of code for the entire page will increase significantly. It is difficult for developers to quickly find specific function or component code and to quickly locate the code segment of a specific function or component. The lack of structure and clear organization will lead to inefficiency in developers reading and maintaining the code. (2) High maintenance cost: When modifying a certain function, other unrelated parts may be accidentally affected, which increases the difficulty of fixing bugs and adding new functions and increases maintenance costs. (3) Poor reusability: When other pages need the same pop-up, the same code needs to be rewritten, which not only increases the workload, but also easily leads to code duplication and inconsistency. Even if a function or component is used in multiple places, the same code needs to be rewritten, which reduces the reusability of the code. Summary of the invention

[0004] Based on this, it is necessary to provide a pop-up component configuration calling method, device, equipment and storage medium to address the above technical problems.

[0005] A method for calling a pop-up component configuration, the method comprising:

[0006] Write a pop-up component based on the preset parameter object;

[0007] The middleware is written by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method;

[0008] When the pop-up box opening operation is triggered, the middleware is called using a pre-defined general function, the parameter object is received and processed by the middleware, and a corresponding pop-up box component instance is dynamically generated. The business component and the business data are passed in using the pop-up box opening method, the business component and the business data are combined and mounted on the pop-up box component instance, and the pop-up box HTML structure is generated and displayed on the current page.

[0009] In one of the embodiments, it also includes: the pop-up window opening method is also used to receive business data and transfer the business data to the business component.

[0010] In one of the embodiments, it also includes: the pop-up box closing method is used to destroy the pop-up box component instance.

[0011] In one of the embodiments, it also includes: the parameter object includes pop-up box constant parameters: the pop-up box constant parameters include the position of element insertion, the callback function of the life cycle, the custom data object, and the title, style, animation and UI component properties of the pop-up box.

[0012] In one of the embodiments, it also includes: constructing a bullet box empty frame according to a preset parameter object, and writing the business components that need to be displayed through the bullet box into an independent file.

[0013] In one of the embodiments, it also includes: defining a life cycle function in the process from creation to destruction of the pop-up box component instance, and binding the life cycle hook to the corresponding configuration object in the parameter object.

[0014] In one of the embodiments, it also includes: when the pop-up box closing operation is triggered, the pop-up box closing method is called, the .then callback mechanism of the pop-up box opening method is triggered, and the custom event after the pop-up box is closed is executed.

[0015] A configurable calling device for a pop-up component, the device comprising:

[0016] The pop-up component writing module is used to write pop-up components according to pre-set parameter objects;

[0017] A middleware writing module is used to write middleware by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method;

[0018] The pop-up box generation module is used to call the middleware using a pre-defined general function when triggering the pop-up box opening operation, use the middleware to receive the parameter object and process it, dynamically generate a corresponding pop-up box component instance, use the pop-up box opening method to pass in the business component and business data, combine the business component and business data and mount them on the pop-up box component instance, generate a pop-up box HTML structure and display it on the current page.

[0019] A computer device comprises a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

[0020] Write a pop-up component based on the preset parameter object;

[0021] The middleware is written by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method;

[0022] When the pop-up box opening operation is triggered, the middleware is called using a pre-defined general function, the parameter object is received and processed by the middleware, and a corresponding pop-up box component instance is dynamically generated. The business component and business data are passed in using the pop-up box opening method, the business component and business data are combined and mounted on the pop-up box component instance, and the pop-up box HTML structure is generated and displayed on the current page.

[0023] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements the following steps:

[0024] Write a pop-up component based on the preset parameter object;

[0025] The middleware is written by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method;

[0026] When the pop-up box opening operation is triggered, the middleware is called using a pre-defined general function, the parameter object is received and processed by the middleware, and a corresponding pop-up box component instance is dynamically generated. The business component and business data are passed in using the pop-up box opening method, the business component and business data are combined and mounted on the pop-up box component instance, and the pop-up box HTML structure is generated and displayed on the current page.

[0027] The above-mentioned configuration calling method, device, equipment and storage medium of the pop-up box component use high-order components in the form of middleware to encapsulate the general logic not limited to the pop-up box component, so that the pop-up box and the business relationship of the current page are completely decoupled to realize modular management components, thereby simplifying the pop-up box component calling method, improving code reusability, and improving the scalability of the pop-up box component. A simple, efficient and flexible configuration calling method is provided. By defining a general function, the general function can receive a custom component and a series of configuration parameters as input. The custom component can be a native business component or a UI component. According to these parameters, a (virtual) component instance is dynamically generated and called on demand to generate a real HTML node to be displayed on the interface. The method of the present invention eliminates the need for developers to write independent framework code for each pop-up box, and a variety of pop-up box display and business function requirements can be achieved through simple configuration. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] Figure 1 An application scenario diagram of a configured calling method of a pop-up window component in an embodiment;

[0029] Figure 2 A structural block diagram of a configuration calling device for a pop-up window component in one embodiment;

[0030] Figure 3 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0031] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0032] In one embodiment, Figure 1 As shown, a configuration calling method for a pop-up window component is provided, including the following steps:

[0033] Step 102, write a pop-up component according to a preset parameter object.

[0034] A pop-up window is a user interface element that usually pops up in the center of a page to display important messages, prompts, forms, or other information. The pop-up window usually covers other content on the page until the user completes the operation in the pop-up window or closes the pop-up window. The main purpose of the pop-up window is to attract the user's attention and require the user to perform some operation or confirmation. The pop-up window component refers to a pre-packaged pop-up window function module in front-end development. Developers can directly use these components to implement the pop-up window function without having to write the pop-up window code from scratch.

[0035] The parameter object contains various configurations and behaviors related to the pop-up window. Configuring and managing the pop-up window component through the parameter object can improve the flexibility and controllability of pop-up window creation and use.

[0036] Step 104, write the middleware by defining a constructor.

[0037] The constructor is used to dynamically generate a pop-up component instance based on the parameter object. The constructor first receives the configuration parameter object as input, and then dynamically generates a pop-up component instance based on these parameters. At the same time, the created instance contains built-in open (open pop-up) and close (close pop-up) methods, which are used to receive business components and call the pop-up to build the complete HTML code and destroy the instance.

[0038] In front-end development, a pop-up component usually has a set of properties and methods to control the display, style, and function of the pop-up. A pop-up component instance includes properties and methods; properties include pop-up style configuration items, business components, and parameters passed to subcomponents; methods include methods to open and close the pop-up.

[0039] The pop-up style configuration item is used to define the style of the pop-up, which can include CSS styles or class names. The business component is the main business component or content displayed in the pop-up, which can be a custom React / Vue component or HTML content. The business component is configured through business data. The pop-up component instance is the parent component, which contains various child components. The parameters passed to the child components are used to configure the behavior of the child components or display data.

[0040] Step 106, when the pop-up box opening operation is triggered, the middleware is called using a pre-defined general function, the parameter object is received and processed by the middleware, the corresponding pop-up box component instance is dynamically generated, the business component and business data are passed in using the pop-up box opening method, the business component and business data are combined and mounted on the pop-up box component instance, the pop-up box HTML structure is generated and displayed on the current page.

[0041] In the present invention, a general function (useDialog) is defined to call the middleware. The general function can encapsulate the calling logic of the middleware, provide a set of functions (hooks) for implementing the call in the component, and more easily organize and reuse the code, reduce the coupling between components, and improve development efficiency. The middleware (Middleware) can allow the creation of reusable component logic and provide a way to insert custom logic between components, thereby providing scalability support. The callback function event is used to process asynchronous operations or respond to user interactions. In the pop-up box component, the callback function event is usually used to perform specific logic operations at a specific life cycle stage (such as opening, closing, submitting, etc. of the pop-up box). The callback function event can be implemented by the defined useDialog function to provide a more general and reusable way to handle the pop-up box logic.

[0042] When a user needs to open a bullet box when performing an operation, the middleware is called in the callback function event of the current page, the configuration parameter object is passed in to generate a bullet box instance object, and the bullet box component is passed in through the open method. At the same time, the business data required in the bullet box can be passed from the current page to the instance object through the parameter configuration of the middleware, and a complete HTML business code is generated for display. The element is added to the root node of the HTML element by default, and a callback function mechanism is provided. When the bullet box is closed, the function can trigger a callback function or perform other operations. This allows developers to perform some necessary operations after the bullet box is closed, such as updating page data, sending network requests, etc. The method of the present invention implements the bullet box component through functional programming, and the developer only needs to pass in the configuration object to quickly generate the required bullet box without writing a large amount of logic code. The configured calling method allows developers to quickly generate bullet boxes of different styles and functions according to actual needs, thereby improving development efficiency, and the highly configurable bullet box component function reduces the coupling degree of the code, making the code easier to maintain and manage. Due to the high configurability of the bullet box component function, it can easily realize the reuse and expansion of components to meet different business needs.

[0043] In the above-mentioned configuration calling method of the pop-up box component, the general logic not limited to the pop-up box component is encapsulated by using high-order components in the form of middleware, so that the business relationship between the pop-up box and the current page is completely decoupled to realize modular management components, thereby simplifying the pop-up box component calling method, improving code reusability, and improving the scalability of the pop-up box component. A simple, efficient and flexible configuration calling method is provided. By defining a general function, the general function can receive a custom component and a series of configuration parameters as input. The custom component can be a native business component or a UI component. According to these parameters, a (virtual) component instance is dynamically generated and called on demand to generate a real HTML node to display on the interface. The method of the present invention eliminates the need for developers to write independent framework code for each pop-up box, and can achieve diversified pop-up box display and business function requirements through simple configuration.

[0044] In one embodiment, the pop-up window opening method is also used to receive business data and transfer the business data to the business component.

[0045] In one embodiment, the pop-up box closing method is used to destroy the pop-up box component instance.

[0046] In one embodiment, the parameter object includes pop-up box constant parameters: the pop-up box constant parameters include the position of element insertion, the callback function of the life cycle, the custom data object, and the title, style, animation and UI component properties of the pop-up box.

[0047] In this embodiment, the position where the element is inserted (mountNode): defines which DOM node the pop-up box is inserted into in the page, usually the root node (document.body) by default;

[0048] Title of the pop-up box (title): Set the title text of the pop-up box;

[0049] Style of the pop-up box: defines the CSS style of the pop-up box, which can be an object or a class name to customize the appearance of the pop-up box;

[0050] Animation: specifies the animation effect of the pop-up box, such as pop-up, fade-in and fade-out, etc.

[0051] Properties of UI components (uiProps): can contain some UI-related configuration properties, such as button text, icon, size, etc.;

[0052] Lifecycle callbacks: used to perform specific operations at different lifecycle stages of the pop-up window (such as before display, after display, before closing, and after closing);

[0053] Custom data object (customData): allows users to pass some specific business data or context information, which can be used inside the pop-up box.

[0054] In one embodiment, writing a pop-up box component according to a preset parameter object includes: constructing a pop-up box empty frame according to the preset parameter object, and writing the business component to be displayed through the pop-up box into an independent file.

[0055] It can be understood that in addition to the method of this embodiment, it can also be achieved by writing a complete pop-up component and manually rendering the configuration parameters.

[0056] In one embodiment, a life cycle function is defined in the process from creation to destruction of a pop-up component instance, and the life cycle hook is bound to a corresponding configuration object in a parameter object.

[0057] In one embodiment, the method further includes: when the pop-up window closing operation is triggered, calling the pop-up window closing method, triggering the .then callback mechanism of the pop-up window opening method, and executing a custom event after the pop-up window is closed.

[0058] In one embodiment, the method further includes: In order to support more types and styles of bullet boxes, the present invention also provides extensibility support. Developers can customize the style and behavior of the bullet box component as needed, and add it to the functional call interface through a registration mechanism. In this way, developers can flexibly use various bullet box components according to the actual needs of the project.

[0059] The present invention is not limited to the use of pop-up boxes. DOM elements can be added to any node of the HTML structure through the middleware of the present invention, and the underlying native technology appendChild is used to render the node. It is also applicable in different technology stacks and different environments. appendChild is a method in the Document Object Model (DOM) API, which is used to add a node (usually an element node, a text node or a comment node) to the end of the child node list of a specified parent node.

[0060] In a specific embodiment, the steps of the method of the present invention include:

[0061] S1. Define a constructor to create a pop-up box instance. The instance contains properties such as pop-up box style configuration items (title, width, etc.), business components (content), and parameters passed to subcomponents. Built-in methods include methods to open the pop-up box (open), methods to close the pop-up box (close), and life cycle hooks for the pop-up box instance.

[0062] S2. Define the general function useDialog to call the middleware. The function receives the configuration object options as a parameter. Options contains attributes such as title and width, as well as callback functions of related component libraries. It generates a pop-up box instance and exposes open and close methods for specific business calls.

[0063] S3. Inside the useDialog function, parse and process the passed options, dynamically generate the basic framework of the pop-up window, and bind the corresponding callback function.

[0064] S4. Call the useDialog function to generate a pop-up box instance, call the open method to pass in the component mounted to the pop-up box and pass in the business data to the component, and finally generate the complete HTML structure of the pop-up box and display it on the page.

[0065] S5. When you need to close the pop-up window, call the close method, which will trigger the .then callback mechanism of the open method and execute the custom event after the pop-up window is closed.

[0066] It should be understood that although Figure 1 The steps in the flowchart are shown in sequence as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified in this document, there is no strict order restriction for the execution of these steps, and these steps can be executed in other orders. Moreover, Figure 1 At least part of the steps may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least part of the sub-steps or stages of other steps.

[0067] In one embodiment, Figure 2 As shown, a pop-up window component configuration calling device is provided, including:

[0068] A pop-up component writing module 202 is used to write a pop-up component according to a preset parameter object;

[0069] The middleware writing module 204 is used to write the middleware by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to a parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method;

[0070] The pop-up box generation module 206 is used to use a pre-defined general function to call the middleware when the pop-up box opening operation is triggered, use the middleware to receive and process the parameter object, dynamically generate the corresponding pop-up box component instance, use the pop-up box opening method to pass in the business component and business data, combine the business component and business data and mount them on the pop-up box component instance, generate the pop-up box HTML structure and display it on the current page.

[0071] In one of the embodiments, the pop-up window opening method is also used to receive business data and pass the business data into the business component.

[0072] In one of the embodiments, the pop-up window closing method is also used to destroy the pop-up window component instance.

[0073] In one of the embodiments, the parameter object also includes pop-up box constant parameters: the pop-up box constant parameters include the position where the element is inserted, the callback function of the life cycle, the custom data object, and the title, style, animation and UI component properties of the pop-up box.

[0074] In one of the embodiments, it is also used to construct an empty pop-up frame according to a preset parameter object, and write the business components that need to be displayed through the pop-up frame into an independent file.

[0075] In one of the embodiments, it is also used to define a life cycle function in the process from creation to destruction of the pop-up component instance, and bind the life cycle hook to the corresponding configuration object in the parameter object.

[0076] In one of the embodiments, it is also used to call the pop-up box closing method when the pop-up box closing operation is triggered, trigger the .then callback mechanism of the pop-up box opening method, and execute the custom event after the pop-up box is closed.

[0077] For the specific limitations of the pop-up window component configuration calling device, please refer to the limitations of the pop-up window component configuration calling method above, which will not be repeated here. Each module in the above-mentioned pop-up window component configuration calling device can be implemented in whole or in part through software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0078] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 3As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for configuring and calling a pop-up component is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0079] Those skilled in the art will understand that Figure 3 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present invention, and does not constitute a limitation on the computer device to which the solution of the present invention 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.

[0080] In one embodiment, a computer device is provided, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method in the above embodiment when executing the computer program.

[0081] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method in the above embodiment are implemented.

[0082] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided by the present invention can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0083] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0084] The above-mentioned embodiments only express several implementation modes of the present invention, and the description thereof is relatively specific and detailed, but it cannot be understood as limiting the scope of the invention. It should be pointed out that, for a person of ordinary skill in the art, several modifications and improvements can be made without departing from the concept of the present invention, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the attached claims.

Claims

1. A configuration calling method for a pop-up component, characterized in that: The method comprises: Write a pop-up component based on the preset parameter object; The middleware is written by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method; When the pop-up box opening operation is triggered, the middleware is called using a pre-defined general function, the parameter object is received and processed by the middleware, and a corresponding pop-up box component instance is dynamically generated. The business component and business data are passed in using the pop-up box opening method, the business component and business data are combined and mounted on the pop-up box component instance, and the pop-up box HTML structure is generated and displayed on the current page.

2. The method according to claim 1, characterized in that The pop-up window opening method is also used to receive business data and transfer the business data to the business component.

3. The method according to claim 1, characterized in that: The pop-up window closing method is used to destroy the pop-up window component instance.

4. The method according to claim 1, characterized in that: The parameter object includes pop-up box constant parameters: the pop-up box constant parameters include the position of element insertion, the callback function of the life cycle, the custom data object, and the title, style, animation and UI component properties of the pop-up box.

5. The method according to claim 1, characterized in that Writing a pop-up window component according to a preset parameter object includes: Construct an empty pop-up frame based on the preset parameter objects, and write the business components that need to be displayed in the pop-up frame into a separate file.

6. The method according to any one of claims 1 to 5, characterized in that: Define the life cycle function from the creation to the destruction of the pop-up component instance, and bind the life cycle hook to the corresponding configuration object in the parameter object.

7. The method according to claim 1, characterized in that The method further comprises: When the pop-up window closing operation is triggered, the pop-up window closing method is called to trigger the .then callback mechanism of the pop-up window opening method, and the custom event after the pop-up window is closed is executed.

8. A configurable calling device for a pop-up component, characterized in that: The device comprises: The pop-up component writing module is used to write pop-up components according to pre-set parameter objects; A middleware writing module is used to write middleware by defining a constructor; the constructor is used to dynamically generate a pop-up component instance according to the parameter object; the pop-up component instance includes properties and methods; the properties include pop-up style configuration items, business components and parameters passed to subcomponents; the methods include a pop-up opening method and a pop-up closing method; The pop-up box generation module is used to call the middleware using a pre-defined general function when triggering the pop-up box opening operation, use the middleware to receive the parameter object and process it, dynamically generate a corresponding pop-up box component instance, use the pop-up box opening method to pass in the business component and business data, combine the business component and business data and mount them on the pop-up box component instance, generate a pop-up box HTML structure and display it on the current page.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 7 are implemented.

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