Intelligent Loading effect generation method and system based on Vue 2

Abstract

The invention discloses an intelligent Loading effect generation method and system based on Vue 2, and the method comprises the steps: 1, automatically recognizing a page content type through DOM structure analysis or routing meta-information; 2, presetting a corresponding Loading effect component for each page content type; 3, dynamically loading a corresponding Loading effect component according to the identified page content type; and 4, providing an API method, and supporting automatic identification of page types and displaying of a Loading effect. According to the method, the page content type is automatically identified and the Loading effect is generated, so that the repeated workload of a developer is reduced, and the development efficiency can be improved. According to the method, the appropriate Loading effect is displayed according to the page content type, the user perception is improved, and the user experience is enhanced. According to the method, the loading effect is managed by unifying the API and the rule base, follow-up maintenance and expansion are facilitated, the maintenance cost is reduced, and the method is realized based on the Vue 2 native technology, a third-party UI framework does not need to be introduced, and dependence on third-party resources is reduced.

Description

Technical Field

[0001] This invention discloses a method for generating loading effects, particularly a method and system for generating intelligent loading effects based on Vue 2, belonging to the field of computer web front-end technology. Background Technology

[0002] The loading effect is a visual feedback mechanism that conveys "processing / loading" to the user during the interface loading process. Its core function is to alleviate waiting anxiety and improve the user experience, and it is commonly found in apps, web pages, and software. Currently, there are two main ways to implement the loading effect: (1) Traditional Loading effect implementation schemes require writing Loading effect code separately for each type of page content, resulting in a large amount of repetitive work and low development efficiency. When the page content or Loading effect requirements change, multiple code changes are required, making it difficult to manage uniformly and resulting in high maintenance costs.

[0003] (2) The loading effect presented by the loading component of the third-party UI framework is fixed and difficult to dynamically adjust according to the type of page content, resulting in poor flexibility; in addition, a complete third-party UI framework needs to be introduced, which increases the size and complexity of the project and has strong dependence. Summary of the Invention

[0004] To address the issues of low development efficiency, poor flexibility, and high maintenance costs in the existing loading effects technologies mentioned above, this invention provides a smart loading effect generation method and system based on Vue 2, which can automatically generate and display corresponding loading effects according to the page content type, reducing development workload and improving user experience.

[0005] The technical solution adopted by this invention to solve its technical problem is: a method for generating intelligent loading effects based on Vue 2, which includes the following steps: Step S1, Page Content Type Identification: Automatically identify the page content type through DOM structure analysis or routing metadata; Step S2, Loading Effect Rule Library: Preset corresponding loading effect components for each type of page content; Step S3: Dynamic Loading Effect Generation: Based on the identified page content type, dynamically load the corresponding Loading effect component; Step S4, Unified API Call: Provides API methods to support automatic identification of page type and display of loading effect.

[0006] A smart loading effect generation system based on Vue 2, which specifically includes the following functional units: Page content type identification unit: used to automatically identify the page content type through DOM structure analysis or routing metadata; Loading Effect Rule Library Unit: Used to preset corresponding loading effect components for each type of page content; Dynamic Loading Effect Generation Unit: Used to dynamically load the corresponding Loading effect component based on the identified page content type; Unified API Call Unit: Used to provide API methods, supporting automatic identification of page type and display of loading effects; Performance optimization unit: Used to ensure smooth loading without affecting page performance through lazy loading and GPU acceleration technologies.

[0007] The technical solution adopted by the present invention to solve its technical problem further includes: In step S1, the page content recognition includes the following two methods: DOM structure analysis: Detects key tags in a page using JavaScript to identify the type of page content; Route meta information matching: The page type is marked in the meta field of Vue Router. By reading this field, the page content type can be identified.

[0008] In step S1, the page content recognition includes the following sub-steps: Step S1-1: Program starts; Step S1-2: Input DOM information or route meta configuration information; Steps S1-3: Detect page tags; Step S1-4: Determine if a tag exists. If it exists, proceed to step S1-6 based on the tag content. If it does not exist, proceed to step S1-5. Step S1-5: Match routing information and execute step S1-6 according to the page type marked therein; Steps S1-6: Output page type; Steps S1-7: End.

[0009] In step S2, in the Loading effect rule base, when the page type is a form, the corresponding Loading effect is an input box placeholder animation; when the page type is a list, the corresponding Loading effect is a skeleton screen animation; when the page type is a chart, the corresponding Loading effect is a gray placeholder image + progress bar, or developers can extend new types through configuration files.

[0010] In step S3, the dynamic loading effect includes dynamic component loading and animated transitions, wherein: Dynamic component loading: using Vue's ` <component :is="...">Dynamically renders the corresponding Loading component; Animated transitions: via Vue's ` <transition>The component implements a fade-in / fade-out effect.

[0011] In step S3, the generation of the dynamic loading effect includes the following sub-steps: Step S3-1: Program starts; Step S3-2: Match components in the rule base according to page type; Step S3-3: Load the corresponding component; Step S3-4: Render and trigger the animation; Steps S3-5: End.

[0012] In step S4, the API call methods include ELoading.start(): automatically identify the page type and display Loading; ELoading.setType([type name]): manually specify the Loading type; ELoading.end(): end Loading.

[0013] In step S4, the API call sequence is as follows: Step S4-1: The developer initiates the call; Step S4-2: The system sends the identification type to the rule base; Step S4-3: The rule base returns the type to the system; Step S4-4: The system loads the components into the rule base; Steps S4-5: The rule base returns the rendering results to the system; Steps S4-6: The system plays the loading effect, and then turns off the effect after playback ends.

[0014] The process also includes step S5, performance optimization: using lazy loading and GPU acceleration technologies to ensure a smooth loading effect without affecting page performance.

[0015] The beneficial effects of this invention are as follows: By automatically identifying page content types and generating loading effects, this invention reduces repetitive workload for developers, thereby improving development efficiency. This invention displays appropriate loading effects based on page content types, enhancing user perception and improving user experience. This invention manages loading effects through a unified API and rule base, facilitating subsequent maintenance and expansion, reducing maintenance costs, and is implemented based on native Vue 2 technology, eliminating the need for third-party UI frameworks and reducing dependence on third-party resources.

[0016] The present invention will be further described below with reference to the accompanying drawings and specific embodiments. Attached Figure Description

[0017] Figure 1 This is a block diagram of the system structure of the present invention.

[0018] Figure 2 This is a flowchart of the page content recognition process in this invention.

[0019] Figure 3 This is a flowchart illustrating the dynamic loading effect generation process in this invention.

[0020] Figure 4 This is a timing diagram of API calls in this invention. Detailed Implementation

[0021] This embodiment is a preferred embodiment of the present invention. All other embodiments that are the same as or similar to this embodiment in principle and basic structure are within the protection scope of the present invention.

[0022] Please refer to the appendix. Figure 1 This invention primarily protects a method for generating intelligent loading effects based on Vue 2. Its core is to utilize Vue 2's plugin mechanism and dynamic component technology, combined with DOM analysis, rule base management, and performance optimization methods, to achieve intelligent loading effect generation. Specifically, it includes the following steps: Step S1: Page content type identification: Automatically identify the page content type (such as form, list, chart, etc.) through DOM structure analysis or routing metadata.

[0023] For example: Detecting whether there is a presence on the page <el-table>The label is identified as a table type.

[0024] In this embodiment, page content recognition mainly includes the following two methods: DOM structure analysis: Detecting key tags (such as...) on a page using JavaScript <el-table> 、 <el-form>), used to identify the type of page content.

[0025] Route meta information matching: The page type is marked in the meta field of Vue Router (such as { meta: { type:'table'}}). By reading this field, the page content type can also be identified.

[0026] Please refer to the appendix for details. Figure 2 In this embodiment, the page content type identification process includes the following sub-steps: Step S1-1: Program starts; Step S1-2: Input DOM information or route meta configuration information; Steps S1-3: Detect page tags; Step S1-4: Determine if a tag exists. If it exists, proceed to step S1-6 based on the tag content. If it does not exist, proceed to step S1-5. Step S1-5: Match routing information and execute step S1-6 according to the page type marked therein; Steps S1-6: Output page type; Steps S1-7: End.

[0027] In this invention, the page type is determined by inputting the page DOM or route configuration and using tag detection or metadata matching.

[0028] Step S2, Loading Effect Rule Library: Preset corresponding loading effect components (such as form loading, list loading, chart loading, etc.) for each type of page content.

[0029] For example, the form loading effect is a placeholder animation for input boxes and buttons, and the list loading effect is a skeleton screen animation, etc.

[0030] In this embodiment, the preset rule base is shown in the table below: In practice, developers extend new types through configuration files.

[0031] Step S3: Dynamic Loading Effect Generation: Based on the identified page content type, dynamically load the corresponding Loading effect component.

[0032] For example, when the page content is a table, load the table loading component and display the skeleton screen effect.

[0033] In this embodiment, the dynamic loading effect includes dynamic component loading and animated transitions, wherein, Dynamic component loading: using Vue's ` <component :is="...">Dynamic rendering corresponds to the Loading component.

[0034] Animated transitions: via Vue's ` <transition>The component implements a fade-in / fade-out effect.

[0035] Please refer to the appendix for details. Figure 3 In this embodiment, the generation of dynamic loading effects includes the following sub-steps: Step S3-1: Program starts; Step S3-2: Matching rule components. In this embodiment, it is necessary to match components in the rule library according to the page type. Step S3-3: Load the corresponding component; Step S3-4: Render and trigger the animation; Steps S3-5: End.

[0036] Step S4, Unified API Call: Provides concise API methods (such as ELoading.start(), ELoading.end()), supporting automatic identification of page type and display of loading effect.

[0037] For example, after calling ELoading.start(), the tool automatically identifies the page type and displays the corresponding loading effect.

[0038] In this embodiment, the API methods and descriptions can be found in the table below. method illustrate ELoading.start() Automatically identify page type and display Loading... ELoading.setType([type name]) Manually specify Loading type ELoading.end() End of Loading Please refer to the appendix for details. Figure 4 In this embodiment, the API call sequence is as follows: Step S4-1: The developer initiates the call; Step S4-2: The system sends the identification type to the rule base; Step S4-3: The rule base returns the type to the system; Step S4-4: The system loads the components into the rule base; Steps S4-5: The rule base returns the rendering results to the system; Steps S4-6: The system plays the loading effect, and then turns off the effect after playback ends.

[0039] Step S5, Performance Optimization: Through technologies such as lazy loading and GPU acceleration, ensure a smooth loading effect without affecting page performance.

[0040] This invention also protects a smart loading effect generation system based on Vue 2, which specifically includes the following functional units: Page content type identification unit: used to automatically identify page content types (such as forms, lists, charts, etc.) through DOM structure analysis or routing metadata.

[0041] For example: Detecting whether there is a presence on the page <el-table>The label is identified as a table type.

[0042] In this embodiment, page content recognition mainly includes the following two methods: DOM structure analysis: Detecting key tags (such as...) on a page using JavaScript <el-table> 、 <el-form>), used to identify the type of page content.

[0043] Route meta information matching: The page type is marked in the meta field of Vue Router (such as { meta: { type:'table'}}). By reading this field, the page content type can also be identified.

[0044] Please refer to the appendix for details. Figure 2 In this embodiment, the page content type recognition implementation includes the following sub-units: Startup subunit: used to start the program; Input sub-unit: Used to input DOM information or route meta configuration information; Detection subunit: used to detect page tags; Decision Subunit: Used to determine whether a label exists. If it exists, the output subunit is executed based on the label content; otherwise, the matching subunit is executed. Matching subunit: Used to match routing information and execute the output subunit based on the page type marked therein; Output sub-unit: used to output page type; End subunit: Used to terminate the program.

[0045] In this invention, the page type is determined by inputting the page DOM or route configuration and using tag detection or metadata matching.

[0046] Loading Effect Rule Library Unit: Used to preset corresponding loading effect components (such as form loading, list loading, chart loading, etc.) for each type of page content.

[0047] For example, the form loading effect is a placeholder animation for input boxes and buttons, and the list loading effect is a skeleton screen animation, etc.

[0048] In this embodiment, the preset rule base is shown in the table below: In practice, developers extend new types through configuration files.

[0049] Dynamic Loading Effect Generation Unit: Used to dynamically load the corresponding Loading effect component based on the identified page content type.

[0050] For example, when the page content is a table, load the table loading component and display the skeleton screen effect.

[0051] In this embodiment, the dynamic loading effect includes dynamic component loading and animated transitions, wherein, Dynamic component loading: using Vue's ` <component :is="...">Dynamic rendering corresponds to the Loading component.

[0052] Animated transitions: via Vue's ` <transition>The component implements a fade-in / fade-out effect.

[0053] Please refer to the appendix for details. Figure 3 This embodiment includes the following sub-units when generating dynamic loading effects: Startup subunit: used to start the program; Rule matching subunit: used to match rule components. In this embodiment, it is necessary to match components in the rule library according to the page type. Loading sub-unit: Used to load the corresponding component; Rendering subunit: Used to render and trigger animations; End subunit: Used to terminate the program.

[0054] Unified API call unit: Used to provide concise API methods (such as ELoading.start(), ELoading.end()), supporting automatic identification of page type and display of loading effect.

[0055] For example, after calling ELoading.start(), the tool automatically identifies the page type and displays the corresponding loading effect.

[0056] In this embodiment, the API methods and descriptions can be found in the table below. method illustrate ELoading.start() Automatically identify page type and display Loading... ELoading.setType([type name]) Manually specify Loading type ELoading.end() End of Loading Please refer to the appendix for details. Figure 4 In this embodiment, the API call sequence includes the following sub-units: Startup subunit: Used by developers to start and call; Identification subunit: Used to send the identification type to the rule base through the system; Type return subunit: used for returning types from the rule base to the system; Loading subunit: Used to load components into the rule base via the system; Effect Return Sub-unit: Used for the rule base to return the rendering effect to the system; Playback subunit: Used to play the loading effect through the system and turn off the effect after playback ends.

[0057] Performance optimization unit: Used to ensure smooth loading without affecting page performance through technologies such as lazy loading and GPU acceleration.

[0058] This invention improves development efficiency by automatically identifying page content types and generating loading effects, reducing repetitive work for developers. It displays appropriate loading effects based on page content types, enhancing user perception and improving user experience. Furthermore, it manages loading effects through a unified API and rule base, facilitating future maintenance and expansion, reducing maintenance costs, and is implemented using native Vue 2 technology, eliminating the need for third-party UI frameworks and reducing reliance on third-party resources.< / transition> < / component> < / el-table> < / transition> < / component> < / el-table> < / transition> < / component>

Claims

1.A Vue 2-based intelligent Loading effect generation method, characterized by: The method comprises the following steps: Step S1, page content type identification: automatically identify the page content type through DOM structure analysis or route meta information; Step S2, Loading effect rule library: preset corresponding Loading effect components for each page content type; Step S3, dynamic Loading effect generation: dynamically load the corresponding Loading effect component according to the identified page content type; Step S4, unified API calling: provide API methods to support automatic identification of page types and display of Loading effects. 2.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S1, when identifying the page content, the following two methods are included: DOM structure analysis: detect the key tags in the page through JavaScript to identify the page content type; Route meta information matching: mark the page type in the meta field of Vue Router, and read the field to identify the page content type. 3.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S1, when identifying the page content, the following sub-steps are included: Step S1-1, program start; Step S1-2, input DOM information or route meta configuration information; Step S1-3, detect page tags; Step S1-4, judge whether the tags exist, if they exist, execute step S1-6 according to the tag content, if they do not exist, execute step S1-5; Step S1-5, match the route information, and execute step S1-6 according to the page type marked therein; Step S1-6, output the page type; Step S1-7, end. 4.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S2, in the Loading effect rule library, when the page type is a form, the corresponding Loading effect is an input box placeholder animation; when the page type is a list, the corresponding Loading effect is a skeleton screen animation; when the page type is a chart, the corresponding Loading effect is a gray placeholder picture + progress bar, or the developer extends a new type through a configuration file. 5.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S3, the dynamic Loading effect includes dynamic component loading and animation transition, wherein: Dynamic component loading: Use the `` <component :is="...">` dynamically render the corresponding Loading component;< / component> Animated transitions: With Vue, you can use the `` <transition>` the component realizes a fade-in and fade-out effect.< / transition> 6.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S3, when generating the dynamic Loading effect, the following sub-steps are included: Step S3-1, program start; Step S3-2, match the component in the rule library according to the page type; Step S3-3, load the corresponding component; Step S3-4, render and trigger the animation; Step S3-5, end. 7.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S4, the API calling method includes ELoading.start(): automatically identify the page type and display the Loading; ELoading.setType(【type name】): manually specify the Loading type; ELoading.end(): end the Loading. 8.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: In step S4, the API calling sequence is as follows: Step S4-1, the developer starts calling; Step S4-2, the system issues a type identification to the rule library; Step S4-3, the rule library returns the type to the system; Step S4-4, the system loads the component to the rule base; Step S4-5, the rule base returns the rendering effect to the system; Step S4-6, the system plays the loading effect, and closes the effect after the playing is completed. 9.The Vue 2-based smart loading effect generation method of claim 1, characterized in that: The performance optimization further includes the following steps: through the lazy loading and GPU acceleration technology, the loading effect is ensured to be smooth and does not affect the page performance. 10.A Vue 2-based intelligent Loading effect generation system, characterized by: The system specifically includes the following functional units: A page content type identification unit, which is used to automatically identify the page content type through DOM structure analysis or routing meta information; A loading effect rule base unit, which is used to preset corresponding loading effect components for each page content type; A dynamic loading effect generation unit, which is used to dynamically load the corresponding loading effect component according to the identified page content type; A unified API calling unit, which is used to provide API methods to support automatic identification of the page type and display of the loading effect; A performance optimization unit, which is used to ensure the loading effect to be smooth and not affect the page performance through the lazy loading and GPU acceleration technology.

Images