Icon setting method and device, electronic equipment and storage medium

Abstract

The invention provides an icon setting method and device, electronic equipment and a storage medium, and relates to the technical field of front-end, the method comprises the following steps: acquiring a predefined icon component, and converting the icon component into a virtual node; button attribute information is added in the modal dialog box attribute information, and the virtual nodes are added to the button attribute information; when the modal dialog box is rendered according to the modal dialog box attribute information, the button component is rendered according to the button attribute information, so that the button component and the icon component are subjected to combined rendering; according to the embodiment of the invention, the icon component can be converted into the virtual node, the virtual node is added into the button attribute information of the button in the modal dialog box, and then when the modal dialog box is rendered according to the attribute information of the modal dialog box, the button component can be rendered according to the button attribute information, so that the button component and the icon component can be rendered in a combined manner; and therefore, the effect of flexibly setting the icon for the button of the modal dialog box can be achieved.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and in particular to an icon setting method, device, electronic device and storage medium. Background Art

[0002] Modal dialog boxes are common in front-end development, usually used to display reminder information to users. Modal dialog boxes can have multiple components, such as dialog box titles, buttons, etc. Among them, in order to improve the aesthetics of modal dialog boxes, there is a need to set icons for buttons in modal dialog boxes. However, existing front-end development frameworks do not support directly setting icons for buttons in modal dialog boxes, which is not conducive to achieving the above requirements and easily increases the development difficulty for developers. Summary of the invention

[0003] The object of the present invention is to provide an icon setting method, device, electronic device and storage medium, which can set icons for buttons in a modal dialog box based on virtual nodes, thereby improving the flexibility of adding icons to buttons in the modal dialog box.

[0004] In order to solve the above technical problems, the present invention provides an icon setting method, comprising:

[0005] Obtain a predefined icon component and convert the icon component into a virtual node;

[0006] Adding button attribute information to the modal dialog attribute information, and adding the virtual node to the button attribute information;

[0007] When rendering the modal dialog box according to the modal dialog box attribute information, a button component is rendered according to the button attribute information, so as to render the button component in combination with the icon component.

[0008] Optionally, obtaining a predefined icon component includes:

[0009] A preset icon component library is obtained, and the icon component is imported from the icon component library.

[0010] Optionally, converting the icon component into a virtual node includes:

[0011] Import the virtual node creation function;

[0012] The icon component is input as a parameter into a virtual node creation function to obtain the virtual node.

[0013] Optionally, the step of inputting the icon component as a parameter into a virtual node creation function to obtain the virtual node includes:

[0014] Input the icon component as a parameter into the virtual node creation function to obtain an initial virtual node;

[0015] The initial virtual node and the preset text are input as parameters into the virtual node creation function to obtain the virtual node.

[0016] Optionally, it also includes:

[0017] Adding icon attribute information to the modal dialog attribute information, and adding the virtual node to the icon attribute information;

[0018] When rendering the modal dialog box according to the modal dialog box attribute information, the icon component is rendered for the modal dialog box according to the icon attribute information.

[0019] Optionally, the adding the virtual node to the button attribute information includes:

[0020] An icon attribute is set in the button attribute information, and an attribute value of the icon attribute is set as the virtual node.

[0021] Optionally, converting the icon component into a virtual node includes:

[0022] Setting a code statement for converting the icon component into the virtual node;

[0023] The step of setting the attribute value of the icon attribute to the virtual node includes:

[0024] Setting the attribute value of the icon attribute to a code statement for converting the icon component into the virtual node;

[0025] The rendering of the button component according to the button attribute information includes:

[0026] Reading the icon attribute in the button attribute information, and executing the code statement contained in the attribute value of the icon attribute to convert the icon component into a virtual node;

[0027] The button component is combined with the virtual node for rendering.

[0028] The present invention also provides an icon setting device, comprising:

[0029] A virtual node setting module, used for obtaining a predefined icon component and converting the icon component into a virtual node;

[0030] An attribute adding module, used for adding button attribute information to the modal dialog attribute information, and adding the virtual node to the button attribute information;

[0031] A rendering module is used to render a button component according to the button attribute information when rendering the modal dialog box according to the modal dialog box attribute information, so as to render the button component in combination with the icon component.

[0032] The present invention also provides an electronic device, comprising:

[0033] Memory for storing computer programs;

[0034] A processor is used to implement the icon setting method as described above when executing the computer program.

[0035] The present invention also provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are loaded and executed by a processor, the icon setting method as described above is implemented.

[0036] The present invention provides an icon setting method, comprising: obtaining a predefined icon component and converting the icon component into a virtual node; adding button attribute information in modal dialog attribute information, and adding the virtual node to the button attribute information; when rendering the modal dialog according to the modal dialog attribute information, rendering the button component according to the button attribute information, so as to render the button component in combination with the icon component.

[0037] It can be seen that the present invention can first obtain a predefined icon component and convert the icon component into a virtual node, wherein the virtual node is an abstract representation of a real DOM node (Document Object Model) and can be used to generate and dynamically insert a DOM node. Subsequently, the present invention can add button attribute information to the modal dialog attribute information, and add the virtual node to the button attribute information to establish a combined association relationship between the virtual node and the button; subsequently, when rendering the modal dialog according to the modal dialog attribute information, the present invention can render the button component according to the button attribute information, that is, while rendering the button component, the above-mentioned virtual node can be converted into a real DOM element containing an icon component, and the real DOM element can be combined with the button component, so that the button component and the icon component can be combined and rendered, thereby achieving the effect of flexibly setting icons for the buttons of the modal dialog. The present invention also provides an icon setting device, an electronic device and a computer-readable storage medium, which have the above-mentioned beneficial effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0039] Figure 1 A flowchart of an icon setting method provided by an embodiment of the present invention;

[0040] Figure 2 A flowchart of another icon setting method provided by an embodiment of the present invention;

[0041] Figure 3 A structural block diagram of an icon setting device provided by an embodiment of the present invention;

[0042] Figure 4 The present invention provides a structural block diagram of an electronic device. DETAILED DESCRIPTION

[0043] 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 ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0044] Modal dialog boxes are common dialog boxes in front-end development. They can be provided by front-end development frameworks (such as Ant-Design-Vue) and are usually used to display reminder information to users. Modal dialog boxes can have multiple components, such as dialog box titles, dialog box contents, buttons, etc. Buttons can include OK buttons (okButtonProps), cancel buttons (cancelButtonProps), etc. Among them, in order to improve the aesthetics of modal dialog boxes, there is a need to set icons for buttons in modal dialog boxes. However, existing front-end development frameworks do not support directly setting icons for buttons in modal dialog boxes. Therefore, it is usually necessary to mount the modal dialog box on a specified DOM node (Document Object Model, document object model), and add styles to the modal dialog box component according to the DOM class name, so as to achieve the effect of adding icons to the buttons in the modal dialog box, where DOM is a data model for organizing web page elements. However, this method is not only complicated, but also requires developers to manually modify the style, and may need to use deep selectors (such as / deep / , used to change the internal style of the component) to overwrite the original style of the modal dialog box, which not only increases the development cost, but also introduces unnecessary complexity.

[0045] In view of this, in order to address the technical problem that it is difficult to flexibly set icons for buttons in a modal dialog box, the present invention can provide an icon setting method, which can set icons for buttons in a modal dialog box based on virtual nodes, thereby improving the flexibility of adding icons to buttons in the modal dialog box.

[0046] For easier understanding, please refer to Figure 1 , Figure 1 A flowchart of an icon setting method provided by an embodiment of the present invention, the method may include:

[0047] S101: Acquire a predefined icon component, and convert the icon component into a virtual node.

[0048] In this step, the icon component (Icon) is a semantic vector graphic and is a component object that needs to be added to the button in this embodiment. In order to add the icon component to the corresponding button in the modal dialog box, this embodiment can first convert the icon component into a virtual node (Vnode). Among them, the virtual node is an abstract representation of the real DOM node, which contains the necessary information required to generate the real DOM node, such as tag name, attributes, and child nodes. The advantage of the virtual node is that it can be dynamically converted into a real DOM node and dynamically inserted into the page. Therefore, after converting the icon component into a virtual node, this embodiment can associate the virtual node with the button of the modal dialog box to determine the insertion position of the virtual node; when rendering the modal dialog box, the real DOM node (including the icon component) corresponding to the virtual node can be dynamically generated, and the real DOM node can be dynamically set at the DOM position corresponding to the button, and then the real DOM node corresponding to the virtual node can be dynamically combined with the button for rendering to achieve the effect of adding an icon to the button.

[0049] Specifically, in order to convert the icon component into a virtual node, this embodiment needs to import a virtual node creation function (createVNode), and input the icon component as a parameter into the virtual node creation function to obtain the above virtual node.

[0050] Based on this, converting the icon component into a virtual node may include:

[0051] Step 11: Import the virtual node creation function.

[0052] In this step, you can execute the import { createVNode} from 'vue' statement to import the virtual node creation function.

[0053] Step 12: Input the icon component as a parameter into the virtual node creation function to obtain the virtual node.

[0054] In this step, for example, the statement const icon = createVNode(YourIconComponent) can be executed to convert the icon component into a virtual node. In this statement, "icon" is a virtual node, "YourIconComponent" is an icon component, and "const" is a variable keyword.

[0055] It is worth pointing out that virtual nodes can be nested with each other, for example, a virtual node can be used as a child node of another virtual node. In this way, the present embodiment can achieve a rich form of icon setting. For example, in order to combine an icon component with a corresponding preset text, the present embodiment can first input the icon component as a parameter into the virtual node creation function to obtain an initial virtual node containing only the icon component; then, the initial virtual node and the preset text can be input as parameters into the virtual creation node to obtain a virtual node, so as to merge the initial virtual node and the preset text into one virtual node, and then the icon component and the preset text can be combined in the same virtual node to achieve a rich combination effect.

[0056] Based on this, the step of inputting the icon component as a parameter into a virtual node creation function to obtain the virtual node may include:

[0057] Step 21: Input the icon component as a parameter into the virtual node creation function to obtain an initial virtual node;

[0058] Step 22: Input the initial virtual node and preset text as parameters into the virtual node creation function to obtain the virtual node.

[0059] In this step, you can execute the statement const buttonVNode = createVNode('button', { class:'custom-button'}, [icon, 'Click me']) to merge the virtual node "icon" and the preset text 'Clickme' into one virtual node. Among them, "buttonVNode" is the merged virtual node, "button" is the label of the virtual node, and class: 'custom-button' indicates that the category of the virtual node is custom-button (custom button).

[0060] Furthermore, before using the above icon components, it is necessary to import the icon components into the program file. For ease of use, this embodiment can import the above icon components from a preset icon component library.

[0061] Based on this, the obtaining of the predefined icon component may include:

[0062] Step 31: Obtain a preset icon component library, and import the icon component from the icon component library.

[0063] In this step, you can execute the import { ExclamationCircleOutlined, CloseOutlined,CheckOutlined} from '@ant-design / icons-vue' statement to import the three icon components "ExclamationCircleOutlined", "CloseOutlined", and "CheckOutlined" from the preset icon library "@ant-design / icons-vue".

[0064] S102: Add button attribute information to the modal dialog attribute information, and add the virtual node to the button attribute information.

[0065] In this step, the modal dialog attribute information management controls the content contained in the modal dialog and the presentation form of these contents. When rendering and generating a modal dialog, the modal dialog attribute information needs to be referred to. For example, the modal dialog attribute information may include: title (title attribute information), icon (modal dialog icon attribute information), content (main content attribute information), okText (confirm button text), cancelText (cancel button text), okButtonProps (confirm button attribute information), cancelButtonProps (cancel button attribute information). Among them, the OK button and the Cancel button are buttons to which icons need to be added in this embodiment. In order to associate the above-mentioned virtual nodes with the OK button and the Cancel button, this embodiment needs to add the above-mentioned virtual nodes to the button attribute information of these two buttons. Furthermore, when rendering the OK button and the Cancel button in the modal dialog box, the corresponding button attribute information can be referred to, and then the virtual node can be dynamically converted into a real DOM node, and the real DOM node can be combined with the button for rendering, so that the icon component can be added to the OK button and the Cancel button.

[0066] Specifically, in this embodiment, an icon attribute can be added to the button attribute information, and the attribute value of the icon attribute can be set as the virtual node. In this way, when the attribute value of the icon attribute is read, the virtual node can be combined with the corresponding button for rendering.

[0067] Based on this, adding the virtual node to the button attribute information may include:

[0068] Step 41: setting an icon attribute in the button attribute information, and setting the attribute value of the icon attribute as the virtual node.

[0069] S103: When rendering the modal dialog box according to the modal dialog box attribute information, render a button component according to the button attribute information, so as to render the button component in combination with the icon component.

[0070] As described above, since a virtual node has been added to the button attribute information, when rendering the button component according to the button attribute information, the button component and the icon component can be rendered in combination, thereby achieving the effect of adding an icon to the button.

[0071] It should be noted that this embodiment does not limit how to render the modal dialog box, and reference may be made to related technologies of front-end development.

[0072] Furthermore, in addition to adding an icon component to a button, the method can also add the virtual node to the icon attribute information of the modal dialog box itself. In this way, when rendering the modal dialog box, an icon component can also be added to the modal dialog box itself.

[0073] Based on this, the method may further include:

[0074] Step 51: Add icon attribute information to the modal dialog attribute information, and add the virtual node to the icon attribute information.

[0075] Step 52: When rendering the modal dialog box according to the modal dialog box attribute information, render the icon component for the modal dialog box according to the icon attribute information.

[0076] Based on the above embodiment, the present invention can first obtain a predefined icon component and convert the icon component into a virtual node, wherein the virtual node is an abstract representation of a real DOM node (Document Object Model) and can be used to generate and dynamically insert a DOM node. Subsequently, the present invention can add button attribute information to the modal dialog attribute information, and add the virtual node to the button attribute information to establish a combined association relationship between the virtual node and the button; subsequently, when rendering the modal dialog according to the modal dialog attribute information, the present invention can render the button component according to the button attribute information, that is, while rendering the button component, the above virtual node can be converted into a real DOM element containing an icon component, and the real DOM element can be combined with the button component, so that the button component and the icon component can be combined and rendered, thereby achieving the effect of flexibly setting icons for the buttons of the modal dialog.

[0077] Based on the above embodiment, in order to facilitate the development of front-end applications, this embodiment can also directly set the attribute value of the icon attribute in the button attribute information as a code statement for converting the icon component into the virtual node. In this way, when rendering a modal dialog box, the button attribute information can be read, and the icon component can be dynamically converted into a virtual node according to the attribute value of the icon attribute, thereby improving the convenience of front-end application development. The above setting process is introduced below. In one possible case, the method can also include:

[0078] S201. Obtain a predefined icon component, and set a code statement for converting the icon component into the virtual node.

[0079] S202: Add button attribute information to the modal dialog attribute information, set icon attributes in the button attribute information, and set the attribute value of the icon attribute to a code statement for converting the icon component into the virtual node.

[0080] For example, in this embodiment, the icon component can be set for the cancel button in the modal dialog box through the following code:

[0081] Modal.confirm({

[0082] cancelButtonProps:{ / / Cancel button property information

[0083] icon: createVNode(closeOutlined), / / Cancel button icon properties

[0084] }

[0085] okButtonProps:{ / / Confirm button property information

[0086] icon: createVNode(CheckOutlined), / / Confirm the icon properties of the button

[0087] }

[0088] });

[0089] Among them, the content contained in Modal.confirm is the modal dialog box attribute information; cancelButtonProps is the cancel button attribute information, and okButtonProps is the confirm button attribute information; the icons in the two sets of button attribute information are all icon attributes, and the icon attribute value of the cancel button is createVNode(closeOutlined), closeOutlined is an icon component, and createVNode(closeOutlined) is used to convert closeOutlined into a virtual node; the icon attribute value of the confirm button is createVNode(CheckOutlined), CheckOutlined is an icon component, and createVNode(CheckOutlined) is used to convert CheckOutlined into a virtual node. It can be seen that this embodiment can directly set the icon attribute value in the button attribute information to the code statement used to convert the icon component into a virtual node. In this way, when reading the icon attribute value, a virtual node can be dynamically created to improve flexibility.

[0090] S203. When rendering the modal dialog box according to the modal dialog box attribute information, read the icon attribute in the button attribute information, and execute the code statement contained in the attribute value of the icon attribute to convert the icon component into a virtual node.

[0091] S204: Combining the button component with the virtual node for rendering.

[0092] Based on the above embodiment, the above icon setting method is fully introduced below in combination with a specific flow chart. The method may include:

[0093] 1. Import the virtual node creation function (createVNode).

[0094] 2. Install the icon component library and introduce it into the program file, and then import the icon components from the icon component library.

[0095] 3. Input the icon component as a parameter into the virtual node creation function to obtain the virtual node.

[0096] 4. Add button attribute information to the modal dialog attribute information, set icon attributes in the button attribute information, and set the attribute value of the icon attribute to the virtual node.

[0097] 5. When rendering the modal dialog box according to the attribute information of the modal dialog box, the button component is rendered according to the button attribute information, so as to render the button component in combination with the icon component.

[0098] That is, this embodiment can be roughly divided into three main steps: 1. Introducing the createVNode function; 2. Introducing the icon component; 3. Setting the properties of the modal dialog box. For easy understanding, please refer to Figure 2 , Figure 2 The present invention is a flowchart of another icon setting method provided by an embodiment of the present invention.

[0099] The icon setting device, electronic device, computer program product and computer-readable storage medium provided in the embodiments of the present invention are introduced below. The icon setting device, electronic device, computer program product and computer-readable storage medium described below can be referenced to each other with the icon setting method described above.

[0100] Please refer to Figure 3 , Figure 3 This is a structural block diagram of an icon setting device provided by an embodiment of the present invention, and the device may include:

[0101] A virtual node setting module 301 is used to obtain a predefined icon component and convert the icon component into a virtual node;

[0102] The attribute adding module 302 is used to add the button attribute information in the modal dialog attribute information, and add the virtual node to the button attribute information;

[0103] The rendering module 303 is used to render a button component according to the button attribute information when rendering the modal dialog box according to the modal dialog box attribute information, so as to render the button component in combination with the icon component.

[0104] Optionally, the virtual node setting module 301 may include:

[0105] The icon component import submodule is used to obtain a preset icon component library and import the icon component from the icon component library.

[0106] Optionally, the virtual node setting module 301 may include:

[0107] Function import submodule, used to import virtual node creation function;

[0108] The virtual node conversion submodule is used to input the icon component as a parameter into the virtual node creation function to obtain the virtual node.

[0109] Optionally, the virtual node conversion submodule may include:

[0110] An initial virtual node conversion unit, used for inputting the icon component as a parameter into the virtual node creation function to obtain an initial virtual node;

[0111] The virtual node conversion unit is used to input the initial virtual node and preset text as parameters into the virtual node creation function to obtain the virtual node.

[0112] Optionally, the device may further include:

[0113] A second attribute adding module is used to add icon attribute information to the modal dialog attribute information, and add the virtual node to the icon attribute information;

[0114] The second rendering module is used to render the icon component for the modal dialog box according to the icon attribute information when rendering the modal dialog box according to the modal dialog box attribute information.

[0115] Optionally, the attribute adding module 302 may include:

[0116] The attribute value setting submodule is used to set the icon attribute in the button attribute information, and set the attribute value of the icon attribute as the virtual node.

[0117] Optionally, the virtual node setting module 301 may include:

[0118] A code statement setting submodule, used for setting a code statement for converting the icon component into the virtual node;

[0119] The attribute value setting submodule can be used to:

[0120] Setting the attribute value of the icon attribute to a code statement for converting the icon component into the virtual node;

[0121] The rendering module 303 may include:

[0122] A reading submodule, used for reading the icon attribute in the button attribute information, and executing the code statement contained in the attribute value of the icon attribute to convert the icon component into a virtual node;

[0123] The rendering submodule is used to render the button component and the virtual node in combination.

[0124] Please refer to Figure 4 , Figure 4 This is a structural block diagram of an electronic device provided in an embodiment of the present invention. The embodiment of the present invention provides an electronic device 40, including a processor 41 and a memory 42; wherein the memory 42 is used to store a computer program; and the processor 41 is used to execute the icon setting method provided in the aforementioned embodiment when executing the computer program.

[0125] For the specific process of the above-mentioned icon setting method, please refer to the corresponding content provided in the above-mentioned embodiment, which will not be repeated here.

[0126] Furthermore, the memory 42 as a carrier for storing resources may be a read-only memory, a random access memory, a magnetic disk or an optical disk, etc., and the storage method may be temporary storage or permanent storage.

[0127] In addition, the electronic device 40 also includes a power supply 43, a communication interface 44, an input / output interface 45 and a communication bus 46; wherein the power supply 43 is used to provide working voltage for each hardware device on the electronic device 40; the communication interface 44 can create a data transmission channel between the electronic device 40 and external devices, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present invention, and is not specifically limited here; the input / output interface 45 is used to obtain external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.

[0128] An embodiment of the present invention further provides a computer program product, including a computer program / instruction, wherein the computer program / instruction, when executed by a processor, implements the icon setting method described in the above embodiment.

[0129] Since the embodiments of the computer program product part correspond to the embodiments of the icon setting method part, please refer to the description of the embodiments of the icon setting method part for the embodiments of the computer program product part, and will not be repeated here.

[0130] An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the icon setting method described in the above embodiment is implemented.

[0131] Since the embodiments of the computer-readable storage medium part correspond to the embodiments of the icon setting method part, the embodiments of the storage medium part refer to the description of the embodiments of the icon setting method part, which will not be repeated here.

[0132] The various embodiments in the specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description.

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

[0134] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0135] The above is a detailed introduction to an icon setting method, device, electronic device and storage medium provided by the present invention. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present invention, several improvements and modifications can be made to the present invention, and these improvements and modifications also fall within the scope of protection of the present invention.

Claims

1. An icon setting method, characterized in that: include: Obtain a predefined icon component and convert the icon component into a virtual node; Adding button attribute information to the modal dialog attribute information, and adding the virtual node to the button attribute information; When rendering the modal dialog box according to the modal dialog box attribute information, a button component is rendered according to the button attribute information, so as to render the button component in combination with the icon component.

2. The icon setting method according to claim 1, characterized in that: The step of obtaining a predefined icon component includes: A preset icon component library is obtained, and the icon component is imported from the icon component library.

3. The icon setting method according to claim 1, characterized in that: The converting the icon component into a virtual node comprises: Import the virtual node creation function; The icon component is input as a parameter into a virtual node creation function to obtain the virtual node.

4. The image setting method according to claim 3, characterized in that: The step of inputting the icon component as a parameter into a virtual node creation function to obtain the virtual node comprises: Input the icon component as a parameter into the virtual node creation function to obtain an initial virtual node; The initial virtual node and the preset text are input as parameters into the virtual node creation function to obtain the virtual node.

5. The icon setting method according to claim 1, characterized in that: Also includes: Adding icon attribute information to the modal dialog attribute information, and adding the virtual node to the icon attribute information; When rendering the modal dialog box according to the modal dialog box attribute information, the icon component is rendered for the modal dialog box according to the icon attribute information.

6. The icon setting method according to any one of claims 1 to 5, characterized in that: The adding the virtual node to the button attribute information includes: An icon attribute is set in the button attribute information, and an attribute value of the icon attribute is set as the virtual node.

7. The icon setting method according to claim 6, characterized in that: The converting the icon component into a virtual node comprises: Setting a code statement for converting the icon component into the virtual node; The step of setting the attribute value of the icon attribute to the virtual node includes: Setting the attribute value of the icon attribute to a code statement for converting the icon component into the virtual node; The rendering of the button component according to the button attribute information includes: Reading the icon attribute in the button attribute information, and executing the code statement contained in the attribute value of the icon attribute to convert the icon component into a virtual node; The button component is combined with the virtual node for rendering.

8. An icon setting device, characterized in that: include: A virtual node setting module, used for obtaining a predefined icon component and converting the icon component into a virtual node; An attribute adding module, used for adding button attribute information to the modal dialog attribute information, and adding the virtual node to the button attribute information; A rendering module is used to render a button component according to the button attribute information when rendering the modal dialog box according to the modal dialog box attribute information, so as to render the button component in combination with the icon component.

9. An electronic device, characterized in that: include: Memory for storing computer programs; A processor, configured to implement the icon setting method as described in any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are loaded and executed by a processor, the icon setting method according to any one of claims 1 to 7 is implemented.

Images