Label frame assembly configuration method and device, computer equipment, medium and product

Abstract

The invention relates to the technical field of front-end development, and discloses a configuration method and device of a label frame assembly, computer equipment, a medium and a product, and the configuration method of the label frame assembly comprises the steps that the label frame assembly is created, and the label frame assembly is used for displaying a label frame of multi-line characters; obtaining configuration parameters, wherein the configuration parameters comprise a character array style parameter, a label box style parameter and a plurality of character parameters; configuring the plurality of character parameters to a character array in the label box component, wherein the character array is used for displaying the plurality of character parameters in a multi-row label form; configuring the character array style parameter to a style array, wherein the style array is used for setting the style of the multi-row label according to the character array style parameter; the label frame style parameter is configured to the label frame style array in the label frame assembly, the label frame style array is used for setting the style of the label frame according to the label frame style parameter, the label frame assembly is automatically configured, the configuration efficiency is improved, and the error rate is reduced.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a configuration method, device, computer equipment, medium and product of a label frame component. Background Art

[0002] In the front-end development process, the page is the interface for users to interact directly with the website or application. As users' demand for page display increases, the demand for page display diversity is getting higher and higher. For example, for the scene of displaying multiple lines of text on the page, it is generally necessary to use means such as tag configuration to achieve it.

[0003] Currently, in order to display multiple lines of text on a page, it is necessary to configure the tags corresponding to each line of text. In related technologies, Cascading Style Sheets (CSS) and HyperText Markup Language (HTML) can be used to configure the tags corresponding to the multiple lines of text. The multi-line text display effect of the page can be achieved by setting the style attributes of the tags (such as width, height, font, color, etc.) and using layout techniques (such as elastic box layout, grid layout, etc.).

[0004] However, this method requires manual setting of the style attributes of each row of labels, which has the problems of low efficiency and complicated configuration process. Especially when configuring a large number of labels, the configuration process will become cumbersome and prone to errors. Summary of the invention

[0005] In view of this, the present invention provides a configuration method, apparatus, computer equipment, medium and product of a label frame component to solve the problems of low efficiency and complex configuration process.

[0006] In a first aspect, the present invention provides a method for configuring a label box component, comprising: creating a label box component, the label box component being used to display a label box of multiple lines of text; obtaining configuration parameters, the configuration parameters comprising text array style parameters, label box style parameters and multiple text parameters; configuring the multiple text parameters to the text array in the label box component, the text array being used to display the multiple text parameters in the form of multiple lines of labels; configuring the text array style parameters to a style array associated with the text array in the label box component, the style array being used to set the style of the multiple lines of labels according to the text array style parameters; configuring the label box style parameters to the label box style array in the label box component, the label box style array being used to set the style of the label box according to the label box style parameters.

[0007] The present invention creates a label box component, obtains configuration parameters, and the configuration parameters include text array style parameters, label box style parameters, and multiple text parameters. The text array style parameters, label box style parameters, and multiple text parameters are respectively configured into corresponding arrays in the label box component to realize automatic configuration of the label box component. Compared with the related art, the present invention simplifies the configuration method. Developers only need to set configuration parameters to automatically configure the text, style, and layout of multiple-line label boxes, thereby realizing flexible customization of labels, providing users with better display effects, simplifying the cumbersome manual configuration process, and improving the efficiency of label box configuration. It meets the flexible needs of label display in different business scenarios and provides users with a better experience.

[0008] In an optional embodiment, the text array style parameters include click event parameters, delete event parameters and hover event parameters; multiple text parameters are configured to the text array in the label box component, including: binding the click event parameter to the first trigger event in the text array, the first trigger event is used to respond to the triggering of the click event parameter and display the information corresponding to the click event parameter; binding the delete event parameter to the second trigger event in the text array, the second trigger event is used to respond to the triggering of the cross identifier corresponding to the second trigger event, and delete the information corresponding to the delete event parameter; binding the hover event parameter to the third trigger event in the text array, the third trigger event is used to obtain the mouse position information, and is used to control the display and hiding of the floating box according to the position information.

[0009] The present invention configures interactive events by binding click event parameters, deletion event parameters and suspension event parameters to trigger events, so that developers can easily handle interactive events for each row of labels without writing a large amount of repetitive code, simplifying operations, saving physical resources, and improving the customization and flexibility of label display.

[0010] In an optional embodiment, after configuring the label box style parameters to the label box style array in the label box component, the method also includes: drawing a label box for displaying multiple lines of text on a preset canvas according to the text array, style array and label box style array by calling a drawing function.

[0011] The present invention draws a label frame for displaying multiple lines of text on a preset canvas by calling a drawing function. Compared with the related art, the label frame is no longer based on a DOM (Document Object Model) node, but on a canvas element itself. Rendering the label frame in the preset canvas can reduce the number of DOM nodes and improve page performance and rendering efficiency. The present invention effectively reduces a large number of DOM nodes and unnecessary rendering and redrawing operations, and hands the label drawing and rendering process to the browser's graphics processing unit (GPU) for processing, thereby improving page performance and user experience.

[0012] In an optional implementation, after drawing a label box for displaying multiple lines of text, the method further includes: rendering the configured label box component to obtain a rendering result, and caching the rendering result.

[0013] The present invention caches the rendering results, eliminating the need to reload and render tags each time the page is refreshed, so that the results can be directly used in subsequent page refreshes, thereby improving page loading speed and rendering efficiency.

[0014] In an optional implementation, creating a label frame component includes: importing the label frame component using a module import statement in a framework file, and registering the label frame component.

[0015] In an optional implementation, obtaining configuration parameters includes: using parameter transfer properties to obtain configuration parameters sent by a parent component, the parent component is used to receive configuration parameters input by a user, and the label box component is a child component of the parent component.

[0016] In a second aspect, the present invention provides a configuration device for a label box component, comprising: a label box component creation module, used to create a label box component, the label box component is used to display a label box with multiple lines of text; a configuration parameter acquisition module, used to acquire configuration parameters, the configuration parameters include text array style parameters, label box style parameters and multiple text parameters; a text parameter configuration module, used to configure multiple text parameters to the text array in the label box component, the text array is used to display multiple text parameters in the form of multiple lines of labels; a text array style parameter configuration module, used to configure the text array style parameters to the style array associated with the text array in the label box component, the style array is used to set the style of the multiple lines of labels according to the text array style parameters; a label box style parameter configuration module, used to configure the label box style parameters to the label box style array in the label box component, the label box style array is used to set the style of the label box according to the label box style parameters.

[0017] In a third aspect, the present invention provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the configuration method of the label box component of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0018] In a fourth aspect, the present invention provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the method for configuring a label box component of the first aspect or any corresponding embodiment thereof.

[0019] In a fifth aspect, the present invention provides a computer program product, comprising computer instructions for causing a computer to execute the method for configuring a label box component of the first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the related technologies, the drawings required for use in the specific embodiments or the related technical descriptions will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0021] Figure 1 is a flowchart of a method for configuring a label frame component according to an embodiment of the present invention;

[0022] Figure 2 is a flowchart of another method for configuring a label frame component according to an embodiment of the present invention;

[0023] Figure 3 is a flowchart of another method for configuring a label frame component according to an embodiment of the present invention;

[0024] Figure 4 is a structural block diagram of a configuration device of a label frame component according to an embodiment of the present invention;

[0025] Figure 5 It is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0026] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0027] In the field of front-end development, especially in the visual development of Vue components, as users' demand for page display increases, the diversity of page display is increasingly required. There are scenarios where multiple lines of text labels need to be displayed, such as form pages, data display pages, etc. The multi-functional display of the page often needs to be displayed with the help of tags.

[0028] Among them, Vue components are reusable code units used to build user interfaces in the Vue.js framework, which is a progressive JavaScript (programming language) framework for building user interfaces. Tag display refers to displaying data or information in the form of tags in a web page or application, usually including a tag name and a corresponding value. Multi-function display refers to allowing users to customize the style of each row, interactive events, and overall style configuration in the tag display to meet the needs of different business scenarios and provide more flexible and diverse display effects.

[0029] Currently, in order to display multiple lines of text on a page, it is necessary to configure the tags corresponding to each line of text. In related technologies, cascading style sheets CSS and HTML can be used to configure the tags corresponding to the multiple lines of text. The multi-line text display effect of the page can be achieved by setting the style attributes of the tags (such as width, height, font, color, etc.) and using layout techniques (such as elastic box layout, grid layout, etc.).

[0030] However, this method requires manual setting of the style attributes of each row of labels, which has the problems of low efficiency and complicated configuration process. Especially when configuring a large number of labels, the configuration process will become cumbersome and prone to errors.

[0031] When processing interactive events in a page, in related technologies, processing interactive events for each row of labels requires writing a large amount of code, which increases the complexity of development. Interactive events refer to the execution of instructions through operations on controls, for example, clicking a control on the page to display more related content.

[0032] In the related art, each tag corresponds to a node in the DOM (Document Object Model) tree. When there are multiple tags, there will be multiple DOM nodes corresponding to them. When the number of tags is large, the increase in DOM nodes will lead to performance degradation and affect the user experience.

[0033] An embodiment of the present invention provides a method for configuring a label frame component, which achieves the effect of improving configuration efficiency by automatically configuring the label frame component.

[0034] According to an embodiment of the present invention, a configuration method embodiment of a label box component is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0035] In this embodiment, a configuration method of a label frame component is provided, which can be used in a computer device. Figure 1 is a flow chart of a method for configuring a label frame component according to an embodiment of the present invention. Figure 1 As shown, the process includes the following steps:

[0036] Step S101, creating a label frame component, where the label frame component is used to display a label frame with multiple lines of text.

[0037] Among them, the label box component is a user interface component, usually used to display one or more labels (Label). A label is a short text description used to classify, mark or provide a brief description of related content. The label box is a container for presenting and managing labels on a page. One or a row of labels includes a label title and a value.

[0038] In some optional implementations, creating the label frame component includes: importing the label frame component using a module import statement in a framework file, and registering the label frame component.

[0039] Among them, the framework file can be a Vue file of a Vue project, the module introduction statement can be an import statement, and the label box component can be registered in the components (register component) option of the Vue instance.

[0040] In some optional implementations, a label frame component is added to a location on a page where the label frame needs to be displayed, wherein the page may be a form page, a data display page, or other page used for display.

[0041] Step S102, obtaining configuration parameters, the configuration parameters including text array style parameters, label box style parameters and a plurality of text parameters.

[0042] In some optional implementations, obtaining configuration parameters includes: using parameter transfer properties to obtain configuration parameters sent by a parent component, the parent component is used to receive configuration parameters input by a user, and the label box component is a child component of the parent component.

[0043] Among them, the parameter transfer attribute can be props (properties, performance parameters), and the configuration parameters are the configuration parameters sent by the user to the parent component according to actual needs.

[0044] Step S103, configuring the multiple text parameters into a text array in the label frame component, the text array is used to display the multiple text parameters in the form of multiple lines of labels.

[0045] Among them, each text parameter includes a label title and a value. The value in value is the content that the label needs to display. The value in value can be text. The text array (dataList) is the array used to display the label.

[0046] In some optional implementations, multiple text parameters are numbered to obtain multiple row numbers, and the multiple text parameters are configured into a text array in the label box component according to the multiple row numbers.

[0047] Among them, the v-for instruction is used to traverse the dataList array, the row number is used as a unique identifier, the row number is passed into the key (name) attribute, and the row number is stored.

[0048] Step S104, configuring the text array style parameters to the style array associated with the text array in the label box component, the style array is used to set the style of the multi-line label according to the text array style parameters.

[0049] The text array style parameter is a parameter for configuring the label. The text array style parameter is configured to the style array (rowClass) in the label box component to configure the style of the label.

[0050] In some optional implementations, the text array style parameters include at least one or more of the row number of each or each row of labels, label title configuration parameters, value configuration parameters, style parameters, and event parameters.

[0051] Exemplarily, the row number (row) is 1; the label configuration parameters include: label title font color (labelColor), which is black by default; label title font size (labelFont), which is 16px by default; label title bold attribute (labelWeight), which is not bold by default; the icon (labelIcon) style in front of the label title; the dot (labelBullet) style in front of the label title; the image (labelImage) style in front of the label title. Among them, labelIcon can be placed in an SVG (Scalable Vector Graphics) tag for display. Pass labelBullet into the dot in front of the label title. Generally, CSS can be used to draw the dot, and the style of the dot can be dynamically passed into the style style attribute. labelImage can be dynamically passed into the src (specify external resources) resource address attribute of the image image tag to display the image in front of the label title.

[0052] The value configuration parameters include: the font color of the value (valueColor), which is black by default; the font size of the value (valueFont), which is 16px by default; the bold attribute of the value (valueWeight), which is not bold by default; the style of the icon (valueIcon) in front of the value; the style of the dot (valueBullet) in front of the value; the style of the image (valueImage) in front of the value. Among them, valueIcon is the icon in front of value, and the icon can be placed in the svg tag for display. Pass valueBullet to the dot in front of value. Generally, CSS can be used to draw the dot, and the style of the dot can be dynamically passed into the style attribute. valueImage can be dynamically passed into the src (specify external resources) resource address attribute of the image tag to display the image in front of value.

[0053] The style parameters include: the width of the current row (width), which defaults to 100%; the alignment of the label title and value of the entire row (justify), which defaults to left alignment and can also be set to right alignment, center alignment, or justification.

[0054] The event parameters include: click event parameter (rowClick), which is used to customize the click operation of the current row; delete event parameter (rowShow), which is displayed by default. When hidden, the data of the current row will be deleted; hover event parameter (rowHover), which is generally used to suspend and display all text information of the current row.

[0055] In some optional implementations, after configuring the text array style parameters to the style array associated with the text array in the label box component, the text array style parameters are added to the corresponding style of the corresponding row to implement the configuration of the label style.

[0056] For example, the labelColor, labelFont and labelWeight attributes in rowClass are dynamically bound to the color, font-size and font-weight attributes in the style attribute of the label element. In this way, the color, font size and bold attributes of the label can be set according to the definition of rowClass.

[0057] Step S105 , configuring the label frame style parameters to the label frame style array in the label frame component, and the label frame style array is used to set the style of the label frame according to the label frame style parameters.

[0058] The label box style parameters are parameters for configuring the label box, and the label box style array (tagClass) is an array for configuring the overall style of the label box.

[0059] The label box style parameters include border attributes, the default border value is 1px (pixel), solid (solid line); spacing (padding) attributes, the default inner margin is 5px and 10px.

[0060] In some optional embodiments, the tag box is configured by dynamically binding tagClass to the style attribute of the outermost partition tag (div), where div is mainly used to divide the web page content into different logical parts or areas for layout and style settings, and the style attribute is a way to define the appearance and layout of web page elements.

[0061] Among them, the style directive is used to implement dynamic binding of tagClass.

[0062] The configuration method of the label box component provided in this embodiment creates a label box component and obtains configuration parameters, wherein the configuration parameters include text array style parameters, label box style parameters and multiple text parameters, and the text array style parameters, label box style parameters and multiple text parameters are respectively configured into corresponding arrays in the label box component to realize automatic configuration of the label box component. Compared with the related art, the embodiment of the present invention simplifies the configuration method. Developers only need to set configuration parameters to automatically configure the text, style and layout of multiple-line label boxes, thereby realizing flexible customization of labels, providing users with better display effects, simplifying the cumbersome manual configuration process, improving the efficiency of label box configuration, meeting the flexible requirements of label display in different business scenarios, and providing users with a better experience.

[0063] In this embodiment, a configuration method of a label frame component is provided, which can be used in a computer device. Figure 2 is a flowchart of another method for configuring a label frame component according to an embodiment of the present invention. Figure 2 As shown, the process includes the following steps:

[0064] Step S201, creating a label frame component, the label frame component is used to display a label frame of multiple lines of text. Specifically, the above step S201 includes:

[0065] Step S2011, import the label frame component in the framework file using the module import statement, and register the label frame component.

[0066] Step S202, obtaining configuration parameters, the configuration parameters including text array style parameters, label box style parameters and a plurality of text parameters.

[0067] Specifically, the above step S202 includes:

[0068] Step S2021, using the parameter transfer attribute to obtain the configuration parameters sent by the parent component, the parent component is used to receive the configuration parameters input by the user, and the label box component is a child component of the parent component.

[0069] Step S203, configuring the multiple text parameters into a text array in the label box component, the text array is used to display the multiple text parameters in the form of multiple lines of labels.

[0070] Specifically, the above step S203 includes:

[0071] Step S2031, binding the click event parameter to the first trigger event in the text array, the first trigger event is used to respond to the triggering of the click event parameter and display the information corresponding to the click event parameter.

[0072] In some optional implementations, the text array style parameters include click event parameters, delete event parameters, and hover event parameters.

[0073] The first trigger event may be a Click event, and the @click directive may be used to implement the binding of the click event parameters. The Click event is transmitted to the parent component by using defineEmits (a function used to define custom events triggered by components) to implement the triggering based on the click event parameters and display the information corresponding to the click event parameters.

[0074] Step S2032, binding the deletion event parameter to the second trigger event in the text array, the second trigger event is used to delete the information corresponding to the deletion event parameter in response to the triggering of the cross identifier corresponding to the second trigger event.

[0075] The second trigger event may be a Click event, and the delete event parameter is bound to the Click event of the cross identifier of the current row. When the cross is clicked, the delete data operation is performed, that is, the object data of the current row is deleted.

[0076] Step S2033, binding the suspension event parameter to the third trigger event in the text array, the third trigger event is used to obtain the position information of the mouse, and to control the display and hiding of the suspension box according to the position information.

[0077] Among them, the third trigger event is the Mouseenter event. The suspension event parameters are bound to the Mouseenter event in the text array. By obtaining the current mouse position and line number, the display and hiding of the el-tooltip component can be controlled, thereby controlling the display and hiding of the suspension box.

[0078] The embodiment of the present invention configures interactive events by binding click event parameters, deletion event parameters and hover event parameters to trigger events, so that developers can easily handle interactive events for each row of labels without writing a large amount of repetitive code, simplifying operations, saving physical resources, and improving the customization and flexibility of label display.

[0079] Step S204, configure the text array style parameters to the style array associated with the text array in the label box component, and the style array is used to set the style of the multi-line label according to the text array style parameters. Figure 1 Step S104 of the illustrated embodiment will not be described in detail here.

[0080] Step S205: configure the label frame style parameters to the label frame style array in the label frame component. The label frame style array is used to set the label frame style according to the label frame style parameters. Figure 1 Step S105 of the illustrated embodiment will not be described in detail here.

[0081] Step S206, by calling a drawing function, a label frame for displaying multiple lines of text is drawn on a preset canvas according to the text array, the style array and the label frame style array.

[0082] Among them, the preset canvas can be a canvas canvas. By calling the drawing function, a method for drawing a label box for displaying multiple lines of text on the preset canvas according to the text array, the style array and the label box style array is as follows: create a canvas element and obtain its 2D context object; define the configuration information of each row of label boxes; use a JavaScript object to represent the configuration of each row; use a drawing function to draw the label box of each row, and in the drawing function, use the relevant methods of the context object to draw the content of the label box according to the configuration information of each row; call the drawing function on the canvas to loop and draw the label box of each row.

[0083] Step S207, rendering the configured label frame component, obtaining a rendering result, and caching the rendering result.

[0084] The embodiment of the present invention draws a label frame for displaying multiple lines of text on a preset canvas by calling a drawing function. Compared with the related art, the label frame is no longer based on a DOM (Document Object Model) node, but on the canvas element itself. Rendering the label frame in the preset canvas can reduce the number of DOM nodes and improve the performance and rendering efficiency of the page. The present invention effectively reduces the number of a large number of DOM nodes and reduces unnecessary rendering and redrawing operations, and hands the label drawing and rendering process to the browser's graphics processing unit (GPU) for processing, thereby improving the page performance and user experience; the rendering results are cached, and there is no need to reload and render the label each time the page is refreshed, so that it can be directly used in subsequent page refreshes, thereby improving the loading speed and rendering efficiency of the page.

[0085] In this embodiment, a configuration method of a label frame component is provided, which can be used in a computer device. Figure 3 is a flowchart of another method according to an embodiment of the present invention, such as Figure 3 As shown, the process includes the following steps:

[0086] Step S301, creating a label box component in the Vue file to display a multi-functional text label box.

[0087] Step S302, using performance parameters to receive parameters passed by the parent component, including configuration information and style of the label box.

[0088] Among them, a label box component is created in the Vue file, and props is used to pass properties to receive parameters passed by the parent component; three objects are mainly received: dataList parameter, tagClass parameter and rowClass parameter.

[0089] Step S303, configuring detailed information, interactive events and styles of the title and value of each row according to the row number.

[0090] The data of the fields to be displayed in the parameters are passed to dataList (text array), and the style configuration of tagClass (label box style array) and rowClass (style array associated with the text array) are defined. The parameters here are configuration parameters.

[0091] Step S304, dynamically binding styles and events according to performance parameters, including the overall style of the label box, the style and events of each row, etc.

[0092] The dataList array, tagClass array and rowClass array are set to display the overall style of the tag box, the style of each row and the event. For example, the rowClass array is bound to the style attribute to realize the corresponding function.

[0093] Step S305: When the number of rows of the label box is large, the label box is added to the canvas for display.

[0094] Among them, by calling the drawing function, a label box for displaying multiple lines of text is drawn on the preset canvas according to the dataList array, the tagClass array and the rowClass array.

[0095] In an embodiment of the present invention, when the number of rows of the label box is large, the label box is no longer based on the DOM node, but on the canvas element itself. The label box is rendered in a preset canvas, which can reduce the number of DOM nodes and reduce the performance consumption caused by a large number of DOM nodes.

[0096] In this embodiment, a configuration device for a label frame component is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and will not be repeated hereafter. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0097] This embodiment provides a configuration device for a label frame component, such as Figure 4 As shown, including:

[0098] The label frame component creation module 401 is used to create a label frame component, and the label frame component is used to display a label frame of multiple lines of text.

[0099] The configuration parameter acquisition module 402 is used to acquire configuration parameters, which include text array style parameters, label box style parameters and multiple text parameters.

[0100] The text parameter configuration module 403 is used to configure multiple text parameters into a text array in the label box component, and the text array is used to display the multiple text parameters in the form of multiple lines of labels.

[0101] The text array style parameter configuration module 404 is used to configure the text array style parameters to the style array associated with the text array in the label box component, and the style array is used to set the style of the multi-line label according to the text array style parameters.

[0102] The label box style parameter configuration module 405 is used to configure the label box style parameters to the label box style array in the label box component. The label box style array is used to set the style of the label box according to the label box style parameters.

[0103] In some optional implementations, the label frame component creation module 401 includes:

[0104] The label frame component creation unit is used to import the label frame component using the module import statement in the framework file and to register the label frame component.

[0105] In some optional implementations, the configuration parameter acquisition module 402 includes:

[0106] The configuration parameter acquisition unit is used to acquire the configuration parameters sent by the parent component using the parameter transfer attribute. The parent component is used to receive the configuration parameters input by the user, and the label box component is a child component of the parent component.

[0107] In some optional implementations, the text parameter configuration module 403 includes:

[0108] The first configuration unit is used to bind the click event parameter to the first trigger event in the text array, and the first trigger event is used to display information corresponding to the click event parameter in response to the triggering of the click event parameter.

[0109] The second configuration unit is used to bind the deletion event parameter to the second trigger event in the text array, and the second trigger event is used to delete the deletion event parameter in response to the triggering of the cross identifier corresponding to the second trigger event.

[0110] The third configuration unit is used to bind the suspension event to the third trigger event in the text array, and the third trigger event is used to obtain the position information of the mouse, and to control the display and hiding of the suspension box according to the position information.

[0111] In some optional embodiments, the configuration device of the label frame component includes:

[0112] The label box drawing module is used to draw a label box for displaying multiple lines of text on a preset canvas according to a text array, a style array and a label box style array by calling a drawing function.

[0113] The label box component rendering module is used to render the configured label box component, obtain the rendering result, and cache the rendering result.

[0114] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0115] The configuration device of the label frame component in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.

[0116] The embodiment of the present invention also provides a computer device having the above Figure 4 The configuration device of the label frame component is shown.

[0117] See also Figure 5 , Figure 5 is a schematic diagram of the structure of a computer device provided by an optional embodiment of the present invention, such as Figure 5As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 5 A processor 10 is taken as an example.

[0118] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.

[0119] The memory 20 stores instructions executable by at least one processor 10, so that the at least one processor 10 executes the method shown in the above embodiment.

[0120] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0121] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.

[0122] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0123] The embodiment of the present invention also provides a computer-readable storage medium. The method according to the embodiment of the present invention can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium through a network download, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state hard disk, etc.; further, the storage medium can also include a combination of the above types of memories. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.

[0124] A part of the present invention may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present invention through the operation of the computer. Those skilled in the art should understand that the existence of the computer program instruction in a computer-readable medium includes, but is not limited to, a source file, an executable file, an installation package file, etc., and accordingly, the way in which the computer program instruction is executed by the computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium may be any available computer-readable storage medium or communication medium accessible to the computer.

[0125] Although the embodiments of the present invention have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present invention, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A method for configuring a label frame component, characterized in that: The method comprises: Create a label box component, which is used to display a label box with multiple lines of text; Acquire configuration parameters, wherein the configuration parameters include text array style parameters, label box style parameters and multiple text parameters; Configuring the multiple text parameters into a text array in the label frame component, wherein the text array is used to display the multiple text parameters in the form of multiple lines of labels; The text array style parameters are configured into a style array associated with the text array in the label frame component, wherein the style array is used to set the style of the multi-line label according to the text array style parameters; The label frame style parameters are configured into a label frame style array in the label frame component, and the label frame style array is used to set the style of the label frame according to the label frame style parameters.

2. The method according to claim 1, characterized in that: The text array style parameters include click event parameters, delete event parameters and hover event parameters; The configuring the plurality of text parameters into the text array in the label frame component comprises: Binding the click event parameter to a first trigger event in the text array, wherein the first trigger event is used to display information corresponding to the click event parameter in response to the triggering of the click event parameter; Binding the deletion event parameter to a second trigger event in the text array, wherein the second trigger event is used to delete information corresponding to the deletion event parameter in response to triggering of a cross identifier corresponding to the second trigger event; The suspension event parameter is bound to a third trigger event in the text array, and the third trigger event is used to obtain the position information of the mouse and to control the display and hiding of the suspension box according to the position information.

3. The method according to claim 1 or 2, characterized in that: After configuring the label frame style parameters to the label frame style array in the label frame component, the method further includes: By calling a drawing function, the label frame for displaying multiple lines of text is drawn on a preset canvas according to the text array, style array and label frame style array.

4. The method according to claim 3, characterized in that: After drawing the label frame for displaying multiple lines of text, the method further includes: The configured label frame component is rendered to obtain a rendering result, and the rendering result is cached.

5. The method according to claim 1 or 2, characterized in that: The step of creating a label frame component includes: The label frame component is imported into the framework file using a module import statement, and the label frame component is registered.

6. The method according to claim 1 or 2, characterized in that: The obtaining of configuration parameters includes: The configuration parameters sent by the parent component are acquired by using parameter transfer properties. The parent component is used to receive the configuration parameters input by the user. The label box component is a child component of the parent component.

7. A device for configuring a label frame component, characterized in that: The device comprises: A label frame component creation module, used to create a label frame component, wherein the label frame component is used to display a label frame of multiple lines of text; A configuration parameter acquisition module, used to acquire configuration parameters, wherein the configuration parameters include a text array style parameter, a label box style parameter and a plurality of text parameters; A text parameter configuration module, used for configuring the plurality of text parameters into a text array in the label frame component, wherein the text array is used for displaying the plurality of text parameters in the form of a multi-line label; A text array style parameter configuration module, used for configuring the text array style parameters to a style array associated with the text array in the label frame component, wherein the style array is used for setting the style of the multi-line label according to the text array style parameters; The label frame style parameter configuration module is used to configure the label frame style parameters to the label frame style array in the label frame component, and the label frame style array is used to set the style of the label frame according to the label frame style parameters.

8. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the configuration method of the label frame component according to any one of claims 1 to 6 by executing the computer instructions.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the method for configuring the label frame component according to any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises computer instructions, wherein the computer instructions are used to enable a computer to execute the method for configuring the label frame component according to any one of claims 1 to 6.

Images