Character style generation method and device, electronic equipment and storage medium

Abstract

The invention discloses a character style generation method and device, electronic equipment and a storage medium. The technical problems that an existing character style generation method is low in efficiency and lack of reusability are solved. The method comprises the steps that when it is detected that a preset Vue component is loaded to a DOM, attribute information sent by a parent component of the Vue component is received; generating a style object according to the attribute information; obtaining a component template of the Vue component; and rendering the component template by adopting the style object to obtain a character style. According to the method, the style object is generated by receiving the attribute information sent by the parent component, and the corresponding style object does not need to be rewritten, so that the generation process of the style object is simplified, the reusability of the style object is improved, and the style object is easy to modify and maintain.

Description

Technical Field

[0001] The present invention relates to the field of text style technology, and in particular to a text style generation method, device, electronic device and storage medium. Background Art

[0002] In web development, especially when using modern front-end frameworks such as Vue.js, component-based development is a very popular practice. Componentization allows developers to split the UI into independent, reusable parts, each of which encapsulates its own template, logic, and style. This approach not only improves the maintainability of the code, but also promotes team collaboration and code reuse.

[0003] In Vue, components can accept external props to customize their behavior and style, and can also distribute content through slots, making components more flexible and powerful. Slots allow parent components to pass HTML or Vue components to child components, and child components can define the location of slots in their templates to display these contents.

[0004] Specifically, by creating a dedicated Vue component to manage text style settings, developers can define a series of configurable props (such as color, size, line height, etc.), so that the component can dynamically generate the required text effects according to the different parameters passed in. This design makes it easy to achieve the expected visual effect in any scenario where the text style needs to be changed by simply introducing the component and passing the corresponding props value, greatly improving development efficiency and code reusability.

[0005] The existing text style component design is to set the CSS style for the corresponding div. Since there are a lot of text style codes, developers will have extra workload when debugging the code. Therefore, this component combines all style attributes. Developers only need to simply pass in the required attributes to achieve the desired effect. It not only reduces the extra burden caused by frequent debugging of CSS code, but also significantly simplifies the developer's operation process and improves the flexibility of the code by providing an intuitive props interface and slots.

[0006] However, using CSS styles directly on HTML elements (whether inline styles, internal styles, or external style sheets) usually means that the styles are hard-coded in the HTML. This limits the reusability of the styles, because every time the same or similar style of text is needed, the same CSS code needs to be written repeatedly, resulting in code redundancy and lack of reusability. In addition, when the project becomes complex, CSS styles written directly in HTML may become difficult to manage and maintain. Especially in large projects, it may become very time-consuming to find and modify the style of a specific text. Summary of the invention

[0007] The present invention provides a text style generation method, device, electronic device and storage medium, which are used to solve the technical problems of low efficiency and lack of reusability of existing text style generation methods.

[0008] The present invention provides a method for generating a text style, comprising:

[0009] When detecting that a preset Vue component is loaded into the DOM, receiving attribute information sent by the parent component of the Vue component;

[0010] Generate a style object according to the attribute information;

[0011] Get the component template of the Vue component;

[0012] The component template is rendered using the style object to obtain a text style.

[0013] Optionally, the step of generating a style object according to the attribute information includes:

[0014] Obtaining the attribute name and attribute value of each attribute in the attribute information;

[0015] Convert the attribute name to a target attribute name in a preset format; optionally

[0016] Generate a target style attribute using the target attribute name and attribute value;

[0017] Generate a style object using all the target style properties.

[0018] Optionally, the step of using the style object to render the component template to obtain a text style includes:

[0019] Parsing the binding syntax of the component template;

[0020] The style object is bound according to the binding syntax to obtain a text style.

[0021] Optionally, the step of binding the style object according to the binding syntax to obtain a text style includes:

[0022] When the binding syntax is style binding, each attribute in the style object and the attribute value corresponding to the attribute are converted into an inline style string;

[0023] Generate a virtual DOM tree using the component template and the inline style string;

[0024] Get the previous virtual DOM tree;

[0025] Compare the virtual DOM tree with the previous virtual DOM tree to obtain the DOM element to be updated;

[0026] Determine the inline style string to be updated from the inline style string according to the DOM element to be updated;

[0027] The inline style string to be updated is added to the style attribute of the preset div element to obtain the text style.

[0028] Optionally, the attribute information includes font bold setting, font size, italic setting, text color, text decoration, text alignment, text indentation, and line height setting.

[0029] Optionally, the step of using the style object to render the component template to obtain a text style further includes:

[0030] When it is detected that the preset slot content is accessed, the rendering position of the slot content is obtained;

[0031] Render the slot content at the rendering position.

[0032] The present invention also provides a text style generating device, comprising:

[0033] The attribute information receiving module is used to receive the attribute information sent by the parent component of the Vue component when detecting that the preset Vue component is loaded into the DOM;

[0034] A style object generation module, used to generate a style object according to the attribute information;

[0035] A component template acquisition module, used to obtain the component template of the Vue component;

[0036] The text style generation module is used to render the component template using the style object to obtain the text style.

[0037] Optionally, the style object generating module includes:

[0038] The attribute name and attribute value acquisition submodule is used to obtain the attribute name and attribute value of each attribute in the attribute information;

[0039] A format conversion submodule, used for converting the attribute name into a target attribute name in a preset format;

[0040] A target style attribute generation submodule, used to generate a target style attribute using the target attribute name and attribute value;

[0041] The style object generation submodule is used to generate a style object using all the target style attributes.

[0042] The present invention also provides an electronic device, the device comprising a processor and a memory:

[0043] The memory is used to store program code and transmit the program code to the processor;

[0044] The processor is used to execute any of the above text style generation methods according to the instructions in the program code.

[0045] The present invention also provides a computer-readable storage medium, wherein the computer-readable storage medium is used to store program code, and the program code is used to execute the text style generation method as described in any one of the above items.

[0046] It can be seen from the above technical scheme that the present invention has the following advantages: the present invention provides a text style generation method, and specifically discloses: when detecting that a preset Vue component is loaded into the DOM, receiving the attribute information sent by the parent component of the Vue component; generating a style object according to the attribute information; obtaining the component template of the Vue component; using the style object to render the component template to obtain the text style. The present invention generates a style object by receiving the attribute information sent by the parent component, without rewriting the corresponding style object, which simplifies the generation process of the style object, improves the reusability of the style object, and is easy to modify and maintain. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] 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 some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0048] Figure 1 A flowchart of a method for generating a text style provided by an embodiment of the present invention;

[0049] Figure 2 A flowchart of a method for generating a text style according to another embodiment of the present invention;

[0050] Figure 3 A structural block diagram of a text style generating device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0051] The embodiments of the present invention provide a text style generation method, device, electronic device and storage medium, which are used to solve the technical problems of low efficiency and lack of reusability of existing text style generation methods.

[0052] In order to make the purpose, features and advantages of the present invention more obvious and easy to understand, the technical solutions 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 embodiments described below are only 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.

[0053] See also Figure 1 , Figure 1 A flowchart of the steps of a method for generating a text style provided by an embodiment of the present invention.

[0054] The present invention provides a method for generating a text style, which may specifically include the following steps:

[0055] Step 101, when detecting that a preset Vue component is loaded into the DOM, receiving attribute information sent by the parent component of the Vue component;

[0056] Vue is a JavaScript framework for building user interfaces. It is built on standard HTML, CSS, and JavaScript, and provides a declarative, component-based programming model that can efficiently develop user interfaces. Whether it is a simple or complex interface, Vue can handle it.

[0057] DOM (Document Object Model) is a programming interface that allows scripts (such as JavaScript) to dynamically access and update the content, structure, and style of a document. In Web development, DOM represents an HTML or XML document as a structured collection (i.e., a node tree), where each node is a part of the document (such as an element, attribute, or text). Through DOM, developers can easily manipulate elements on a web page to update dynamic content, respond to user interactions, and more.

[0058] Parent component: In the component structure, a component that directly contains and references another component (child component).

[0059] The following is an example of a parent component that contains child components:

[0060]

[0061] In the specific implementation, when it is detected that the preset Vue component is loaded into the DOM, or the Vue instance is created, the property information props sent from the parent component is received.

[0062] In an embodiment of the present invention, the property information props may include weight (font bold setting), size (font size), fontStyle (italic setting), color (text color), decoration (text decoration, such as underline, strikethrough), align (text alignment), indent (text indent), and height (line height setting).

[0063] Step 102, generating a style object according to the attribute information;

[0064] After obtaining the attribute information sent by the parent component, you can use the computed attribute headerStyle to generate a style object using the attribute information.

[0065] In Vue.js, computed properties are used to define values ​​calculated based on other data. These values ​​are cached based on the data they depend on and are only recalculated when the dependent data changes.

[0066] The style object contains the text style. Its color is determined by color, its weight is determined by weight, its font size is determined by size, whether it is italic is determined by fontStyle, its alignment is determined by align, its indent is determined by indent, and its line height is determined by height.

[0067] Step 103, obtaining the component template of the Vue component;

[0068] Component templates are stored in the .vue file <template>In the tag, when the component is instantiated and mounted on the DOM, Vue will use this template to render the HTML structure of the component. This is a rendering process inside Vue. Through the component template, the style object can be applied to the page (HTML) and mounted on the DOM after instantiation.

[0069] Step 104, using the style object to render the component template to obtain the text style.

[0070] After obtaining the component template, you can use the style object to render the component template to obtain the text style.

[0071] The present invention generates a style object by receiving attribute information sent by a parent component, without rewriting the corresponding style object, thus simplifying the generation process of the style object, improving the reusability of the style object, and facilitating modification and maintenance.

[0072] See also Figure 2 , Figure 2 A flowchart of a method for generating a text style is provided in another embodiment of the present invention. The method for generating a text style may specifically include the following steps:

[0073] Step 201, when detecting that a preset Vue component is loaded into the DOM, receiving attribute information sent by the parent component of the Vue component;

[0074] In the embodiment of the present invention, when the Vue component is instantiated, it receives props from the parent component, including weight (font weight), size (font size), etc. When the parent component calls the child component, the prop attribute of Vue is used to pass the parent-child parameters, and the above-mentioned style attributes are passed in, and the child component gets these data intact.

[0075] Step 202, obtaining the attribute name and attribute value of each attribute in the attribute information;

[0076] Step 203, converting the attribute name into a target attribute name in a preset format;

[0077] Step 204, generating a target style attribute using the target attribute name and attribute value;

[0078] Step 205, using all target style attributes to generate a style object;

[0079] After receiving the property information of the parent component, you can traverse all the above props in the child properties, convert the name of each prop into a CSS property name, that is, the format in the real CSS, to use it as the style of the child component, and return the object containing all the calculated style properties as the value of headerStyle to get the style object.

[0080] It should be noted that if the value of some props is undefined or does not meet expectations (for example, fontStyle is not a valid value such as 'italic' or 'normal'), provide default values ​​for these properties in the child component. If nothing is passed, the displayed text will be without any style.

[0081] In the specific implementation, the generation process of the style object is as follows:

[0082] 1. Initial state:

[0083] {} (empty style object)

[0084] 2. Add font-weight:

[0085] Check the value of weight ('bold') and add it to the style object: {"font-weight": "bold"}

[0086] 3. Add font-size:

[0087] Check the value of size ('16px') and add to the style object: {"font-weight": "bold", "font-size": "16px"}

[0088] 4. Add font-style:

[0089] Check the value of fontStyle ('italic'), add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic"}

[0090] 5. Add color:

[0091] Check the value of color ('#333'), add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic", "color": "#333"}

[0092] 6. Add text-decoration:

[0093] Check the value of decoration ('underline'), add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic", "color": "#333", "text-decoration": "underline"}

[0094] 7. Add text-align:

[0095] Check the value of align ('center'), add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic", "color": "#333", "text-decoration": "underline", "text-align": "center"}

[0096] 8. Add padding-left (to handle indent):

[0097] Check the value of indent (20), convert it to '20px', and add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic", "color": "#333", "text-decoration": "underline", "text-align": "center", "padding-left": "20px"}

[0098] 9. Add height:

[0099] Check the value of height ('50px'), add to the style object: {"font-weight": "bold", "font-size": "16px", "font-style": "italic", "color": "#333", "text-decoration": "underline", "text-align": "center", "padding-left": "20px", "height": "50px"}

[0100] 10. Return the style object:

[0101] Returns the final calculated style object for binding to the style attribute of the div element.

[0102] This process ensures that each prop is correctly converted to CSS properties and added to the style object, ultimately forming a style object in string form that can be directly applied to the DOM element.

[0103] Step 206, obtaining the component template of the Vue component;

[0104] Component templates are stored in the .vue file <template>In the tag, when the component is instantiated and mounted on the DOM, Vue will use this template to render the HTML structure of the component. This is a rendering process inside Vue. Through the component template, the style object can be applied to the page (HTML) and mounted on the DOM after instantiation.

[0105] Step 207, using the style object to render the component template to obtain the text style.

[0106] After obtaining the component template, you can use the style object to render the component template to obtain the text style.

[0107] In one example, the steps of using a style object to render a component template and obtain a text style include:

[0108] S71, parse the binding syntax of component template;

[0109] S72, binding the style object according to the binding syntax to obtain the text style.

[0110] In the specific implementation, Vue will parse the component template, find the corresponding binding syntax, bind the style object according to the binding syntax, and obtain the text style.

[0111] In one example, step S72 may include the following sub-steps:

[0112] S721, when the binding syntax is style binding, convert each attribute in the style object and the attribute value corresponding to the attribute into an inline style string;

[0113] S722, generating a virtual DOM tree using a component template and an inline style string;

[0114] S723, obtaining the previous virtual DOM tree;

[0115] S724, compare the virtual DOM tree with the previous virtual DOM tree to obtain the DOM element to be updated;

[0116] S725, determining the inline style string to be updated from the inline style string according to the DOM element to be updated;

[0117] S726, adding the inline style string to be updated to the style attribute of the preset div element to obtain the text style.

[0118] In the specific implementation, in the Vue component, there is a div element, which uses the syntax: style="headerStyle" to bind to the headerStyle computed property. Vue converts the headerStyle object into an inline style string, such as style="font-weight: bold; font-size: 18px; ..." (here is the css that implements the component style). Then, Vue generates a virtual DOM tree based on the component template and the inline style string. In this virtual DOM tree, the div element contains the inline style generated by the headerStyle computed property (this step is done by the Vue mechanism). Then, Vue compares the virtual DOM tree with the previous virtual DOM tree (if it is the first rendering, there is no previous virtual DOM tree). Based on the comparison results, Vue determines which DOM elements need to be updated, that is, determines the DOM elements to be updated. After determining the DOM elements to be updated, you can get the corresponding inline style string to be updated, apply the inline style string to be updated to the style attribute of the div element, and get the corresponding text style.

[0119] Furthermore, in the embodiment of the present invention, the step of using the style object to render the component template to obtain the text style also includes:

[0120] When it is detected that the preset slot content is accessed, the rendering position of the slot content is obtained;

[0121] Renders the slot contents at the render position.

[0122] In actual applications, inside a div element (or other locations specified in the template), Vue can check whether a slot named source is passed in. If so, Vue renders the slot contents to the appropriate location inside the div element (or specified location). The specified location can be achieved by using named slots in the parent component or by specifying the default or named location of the slot in the child component template. source is a named slot, and its content will be rendered inside the div element (assuming no more specific slot location is specified). This allows users to insert custom content inside the component, further enhancing the flexibility and extensibility of the component.

[0123] The present invention generates a style object by receiving attribute information sent by a parent component, without rewriting the corresponding style object, thus simplifying the generation process of the style object, improving the reusability of the style object, and facilitating modification and maintenance.

[0124] See also Figure 3 , Figure 3 A structural block diagram of a text style generating device provided in an embodiment of the present invention.

[0125] An embodiment of the present invention provides a text pattern generating device, comprising:

[0126] The attribute information receiving module 301 is used to receive the attribute information sent by the parent component of the Vue component when detecting that the preset Vue component is loaded into the DOM;

[0127] A style object generating module 302, used to generate a style object according to attribute information;

[0128] The component template acquisition module 303 is used to acquire the component template of the Vue component;

[0129] The text style generating module 304 is used to render the component template using the style object to obtain the text style.

[0130] In the embodiment of the present invention, the style object generation module 302 includes:

[0131] The attribute name and attribute value acquisition submodule is used to obtain the attribute name and attribute value of each attribute in the attribute information;

[0132] The format conversion submodule is used to convert the attribute name into a target attribute name in a preset format;

[0133] A target style attribute generation submodule is used to generate a target style attribute using a target attribute name and an attribute value;

[0134] The style object generation submodule is used to generate a style object using all target style attributes.

[0135] In the embodiment of the present invention, the text style generating module 304 includes:

[0136] The binding syntax parsing submodule is used to parse the binding syntax of component templates;

[0137] The text style generation submodule is used to bind the style object according to the binding syntax to obtain the text style.

[0138] In an embodiment of the present invention, the text style generation submodule includes:

[0139] The inline style string conversion unit is used to convert each attribute in the style object and the attribute value corresponding to the attribute into an inline style string when the binding syntax is style binding;

[0140] A virtual DOM tree generation unit, used to generate a virtual DOM tree using a component template and an inline style string;

[0141] A previous virtual DOM tree obtaining unit, used for obtaining a previous virtual DOM tree;

[0142] The DOM element to be updated obtaining unit is used to compare the virtual DOM tree with the previous virtual DOM tree and obtain the DOM element to be updated;

[0143] The to-be-updated inline style string determining unit is used to determine the to-be-updated inline style string from the inline style string according to the to-be-updated DOM element;

[0144] The text style generating unit is used to add the inline style string to be updated to the style attribute of the preset div element to obtain the text style.

[0145] In the embodiment of the present invention, the attribute information includes font bold setting, font size, italic setting, text color, text decoration, text alignment, text indentation, and line height setting.

[0146] In the embodiment of the present invention, the text style generating module 304 further includes:

[0147] The rendering position acquisition submodule is used to acquire the rendering position of the slot content when it is detected that the preset slot content is accessed;

[0148] The rendering submodule is used to render the slot content at the rendering location.

[0149] An embodiment of the present invention further provides an electronic device, the device comprising a processor and a memory:

[0150] The memory is used to store the program code and transmit the program code to the processor;

[0151] The processor is used to execute the text style generation method of the embodiment of the present invention according to the instructions in the program code.

[0152] The embodiment of the present invention further provides a computer-readable storage medium, which is used to store program codes, and the program codes are used to execute the text style generation method of the embodiment of the present invention.

[0153] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0154] The various embodiments in this 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 referenced to each other.

[0155] It will be appreciated by those skilled in the art that the embodiments of the present invention may be provided as methods, devices, or computer program products. Therefore, the embodiments of the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the embodiments of the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0156] The embodiments of the present invention are described with reference to the flowcharts and / or block diagrams of the methods, terminal devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of the processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing terminal device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing terminal device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0157] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing terminal device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0158] These computer program instructions can also be loaded onto a computer or other programmable data processing terminal device so that a series of operating steps are executed on the computer or other programmable terminal device to produce a computer-implemented process, thereby providing instructions for executing on the computer or other programmable terminal device to implement the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0159] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the embodiments of the present invention.

[0160] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "including a..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0161] As described above, the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features thereof may be replaced by equivalents. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention.< / template> < / template>

Claims

1. A method for generating a text style, characterized in that: include: When detecting that a preset Vue component is loaded into the DOM, receiving attribute information sent by the parent component of the Vue component; Generate a style object according to the attribute information; Get the component template of the Vue component; The component template is rendered using the style object to obtain a text style.

2. The method according to claim 1, characterized in that The step of generating a style object according to the attribute information comprises: Obtaining the attribute name and attribute value of each attribute in the attribute information; Convert the attribute name into a target attribute name in a preset format; Generate a target style attribute using the target attribute name and attribute value; Generate a style object using all the target style properties.

3. The method according to claim 1, characterized in that: The step of using the style object to render the component template to obtain a text style includes: Parsing the binding syntax of the component template; The style object is bound according to the binding syntax to obtain a text style.

4. The method according to claim 3, characterized in that: The step of binding the style object according to the binding syntax to obtain the text style comprises: When the binding syntax is style binding, each attribute in the style object and the attribute value corresponding to the attribute are converted into an inline style string; Generate a virtual DOM tree using the component template and the inline style string; Get the previous virtual DOM tree; Compare the virtual DOM tree with the previous virtual DOM tree to obtain the DOM element to be updated; Determine the inline style string to be updated from the inline style string according to the DOM element to be updated; The inline style string to be updated is added to the style attribute of the preset div element to obtain the text style.

5. The method according to claim 1, characterized in that The attribute information includes font bold setting, font size, italic setting, text color, text decoration, text alignment, text indentation, and line height setting.

6. The method according to claim 4, characterized in that The step of using the style object to render the component template to obtain a text style also includes: When it is detected that the preset slot content is accessed, the rendering position of the slot content is obtained; Render the slot content at the rendering position.

7. A text style generating device, characterized in that: include: The attribute information receiving module is used to receive the attribute information sent by the parent component of the Vue component when detecting that the preset Vue component is loaded into the DOM; A style object generation module, used to generate a style object according to the attribute information; A component template acquisition module, used to obtain the component template of the Vue component; The text style generation module is used to render the component template using the style object to obtain the text style.

8. The device according to claim 7, characterized in that The style object generation module includes: The attribute name and attribute value acquisition submodule is used to obtain the attribute name and attribute value of each attribute in the attribute information; A format conversion submodule, used for converting the attribute name into a target attribute name in a preset format; A target style attribute generation submodule, used to generate a target style attribute using the target attribute name and attribute value; The style object generation submodule is used to generate a style object using all the target style attributes.

9. An electronic device, characterized in that: The device comprises a processor and a memory: The memory is used to store program codes and transmit the program codes to the processor; The processor is used to execute the text style generation method described in any one of claims 1-6 according to the instructions in the program code.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium is used to store program code, and the program code is used to execute the text style generation method according to any one of claims 1-6.

Images