ElementPlus-based self-defined annular progress bar component development method and device and medium

Abstract

The invention provides a method and a device for developing a self-defined annular progress bar component based on Element Plus and a medium, and belongs to the technical field of front-end development. The method comprises the following steps: based on an el-process component of Element Plus, creating an annular progress bar by setting an attribute that type is equal to'circle '; expanding configurable attributes of the annular progress bar; compiling a template of the component; compiling a script of the component; the appearance of the annular progress bar is customized through a CSS or inline style. By adding the configurable attributes, the flexibility of the annular progress bar is greatly enhanced, so that the annular progress bar can meet the requirements under different development scenes. The color, the line width, the size, the text format and the decoration elements of the progress bar can be self-defined according to needs, so that the component is more personalized. Through flexible configuration options and powerful functions, developers can quickly complete the design and implementation of the progress bar, so that the development process of a project is accelerated.

Description

Technical Field

[0001] The invention relates to a method, a device and a medium for developing a customized annular progress bar component based on ElementPlus, and belongs to the technical field of front-end development. Background Art

[0002] In front-end development, ElementPlus, as a widely used Vue3 component library, provides developers with a wealth of UI components, greatly improving development efficiency. However, when developing some specific web pages with high visual requirements, especially for large-screen displays, the configuration of ElementPlus' progress bar component is relatively limited.

[0003] The traditional ElementPlus progress bar component, although it can meet the basic progress display requirements, has certain limitations in style and configuration. Especially when creating a circular progress bar, it has fewer configuration options and cannot directly support gradient colors and complex decorative elements, which is particularly insufficient in design scenarios that require high customization.

[0004] In order to meet the higher-level style and configuration requirements of the circular progress bar in front-end development, there are currently a variety of custom progress bar component solutions on the market, but these solutions often require rewriting a lot of code and are not easy to maintain and expand. Therefore, it is necessary to transform the ElementPlus progress bar component to support more diverse configurations, especially the addition of gradient colors and decorative elements, to improve the flexibility and usability of the component. Summary of the invention

[0005] The purpose of the present invention is to provide a method, device and medium for developing a customized circular progress bar component based on ElementPlus, which supports the configuration of gradient colors and decorative elements by extending the configurable properties of the ElementPlus progress bar while maintaining the ease of use and maintainability of the component to meet the needs of diversified configuration of the circular progress bar in front-end development.

[0006] In order to achieve the above object, the present invention is implemented through the following technical solutions: A method for developing a customized circular progress bar component based on ElementPlus, comprising: S1: Based on the el-progress component of ElementPlus, a circular progress bar is created by setting the type="circle" attribute; this is the basis of the circular progress bar; S2: Expand the configurable properties of the circular progress bar; S3: Write the component template; use SVG to draw the circular progress bar, dynamically set the gradient color through the color configuration passed in by props, and insert custom decorative elements through the reserved slots; S4: Write component scripts; define props and responsive data in scriptsetup or script, and use computed properties to handle values ​​that need to be dynamically calculated; S5: Customize the appearance of the circular progress bar through CSS or inline styles, including: color gradient of the progress bar, style of the progress bar text, and background style of the progress bar.

[0007] Preferably, adjust the layout or appearance of the container by adding styles to the component's stylescoped.

[0008] Preferably, the configurable properties of the extended circular progress bar include: percentage, circular progress bar size, line width, color, progress bar status, whether to display text internally, text font format, decorative elements and decorative element data.

[0009] Preferably, the stroke-dasharray and stroke-dashoffset properties are used to control the display progress of the progress bar.

[0010] Preferably, use methods to handle user interaction or animation effects.

[0011] Preferably, dynamically change the color and style by dynamically changing CSS properties through JavaScript; use CSS transition properties or @keyframes animation to create a smooth progress change effect.

[0012] A device for developing a ring progress bar component customized based on ElementPlus comprises a processor and a memory storing program instructions, wherein the processor is configured to execute a method for developing a ring progress bar component customized based on ElementPlus when running the program instructions.

[0013] A computer-readable storage medium, characterized in that a computer program is stored thereon, and when the program is executed by a processor, the method for developing a customized circular progress bar component based on ElementPlus is implemented.

[0014] The advantages of the present invention are that by adding configurable attributes (such as gradient colors, decorative elements, etc.), the flexibility of the circular progress bar is greatly enhanced, so that it can meet the needs of different development scenarios. The color, line width, size, text format and decorative elements of the progress bar can be customized as needed to make the component more personalized.

[0015] Supports gradient color progress bars and rich decorative elements to make the interface more beautiful and enhance the user's visual experience. By adding interactive methods such as clicking and dragging, users can operate the progress bar more conveniently, enhancing the interactivity of the application.

[0016] By providing a highly configurable circular progress bar component, developers can reduce the workload of repeatedly creating similar components in their projects. Flexible configuration options and powerful functions enable developers to quickly complete the design and implementation of the progress bar, thereby speeding up the project development process. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings are used to provide further understanding of the present invention and constitute a part of the specification. They are used to explain the present invention together with the embodiments of the present invention and do not constitute a limitation of the present invention.

[0018] Figure 1 It is a schematic diagram of the process of the present invention. DETAILED DESCRIPTION

[0019] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments 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.

[0020] like Figure 1 As shown, a method for developing a customized circular progress bar component based on ElementPlus includes: S1: Based on the el-progress component of ElementPlus, a circular progress bar is created by setting the type="circle" attribute; this is the basis of the circular progress bar.

[0021] S2: Expand the configurable properties of the circular progress bar.

[0022] S3: Write the component template; use SVG to draw the circular progress bar, dynamically set the gradient color through the color configuration passed in by props, and insert custom decorative elements through the reserved slots.

[0023] S4: Write component scripts; define props and responsive data in scriptsetup or script, and use computed properties to handle values ​​that need to be dynamically calculated.

[0024] S5: Customize the appearance of the circular progress bar through CSS or inline styles, including: color gradient of the progress bar, style of the progress bar text, and background style of the progress bar.

[0025] As a refinement of the above embodiment, the layout or appearance of the container is adjusted by adding a style in the stylescoped of the component.

[0026] As a refinement of the above embodiment, the configurable properties of the extended circular progress bar include: percentage, circular progress bar size, line width, color, progress bar status, whether to display text internally, text font format, decorative elements and decorative element data.

[0027] percentage: progress percentage, required, ranging from 0 to 100.

[0028] width: The size (diameter) of the circular progress bar.

[0029] stroke-width: The line width of the circular progress bar.

[0030] color: The color of the progress bar. It supports custom color functions and changes the color according to the progress.

[0031] status: The status of the progress bar, such as success, warning, exception, etc., used to change the color and style of the progress bar.

[0032] text-inside: Whether to display the progress text inside the progress bar.

[0033] format: Customize the format function of progress text.

[0034] font-style: Customize the text style.

[0035] decorate: decorative elements, which can be text, image address, etc.

[0036] decorate-size: The size of the decorative element.

[0037] decorate-position: The position of the decorative element.

[0038] As a refinement of the above embodiment, the stroke-dasharray and stroke-dashoffset attributes are used to control the display progress of the progress bar.

[0039] As a refinement of the above embodiment, methods are used to process user interaction or animation effects.

[0040] As a refinement of the above embodiment, the color and style are dynamically changed by dynamically changing CSS properties through JavaScript; the transition property of CSS or @keyframes animation is used to create a smooth progress change effect; and the size and layout are adjusted using media queries.

[0041] The disclosed embodiment also provides a device for developing a ring progress bar component customized based on ElementPlus, including a processor and a memory. Optionally, the device may also include a communication interface and a bus. The processor, the communication interface, and the memory may communicate with each other through the bus. The communication interface may be used for information transmission. The processor may call the logic instructions in the memory to execute the method for developing a ring progress bar component customized based on ElementPlus of the above embodiment.

[0042] In addition, the logic instructions in the above-mentioned memory can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product.

[0043] The memory, as a computer-readable storage medium, can be used to store software programs and computer executable programs, such as program instructions / modules corresponding to the method in the embodiment of the present disclosure. The processor executes functional applications and data processing by running the program instructions / modules stored in the memory, that is, the development method of the customized circular progress bar component based on ElementPlus in the above embodiment is implemented.

[0044] The memory may include a program storage area and a data storage area, wherein the program storage area may store an operating system and an application required for at least one function; the data storage area may store data created according to the use of the terminal device, etc. In addition, the memory may include a high-speed random access memory and may also include a non-volatile memory.

[0045] An embodiment of the present disclosure provides a computer-readable storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured to execute the above-mentioned method for developing a customized circular progress bar component based on ElementPlus.

[0046] The computer-readable storage medium mentioned above may be a transient computer-readable storage medium or a non-transitory computer-readable storage medium.

[0047] The technical solution of the embodiment of the present disclosure can be embodied in the form of a software product, which is stored in a storage medium and includes one or more instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the method described in the embodiment of the present disclosure. The aforementioned storage medium may be a non-transient storage medium, including: a USB flash drive, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a disk or an optical disk, and other media that can store program codes, or a transient storage medium.

[0048] Finally, it should be noted that the above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art can still modify the technical solutions described in the aforementioned embodiments or replace some of the technical features therein by equivalents. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included in the protection scope of the present invention.

Claims

1. A method for developing a customized circular progress bar component based on ElementPlus, characterized in that: The components are obtained by the following steps: S1: Based on the el-progress component of ElementPlus, a circular progress bar is created by setting the type="circle" attribute; S2: Expand the configurable properties of the circular progress bar; S3: Write the component template; use SVG to draw the circular progress bar, dynamically set the gradient color through the color configuration passed in by props, and insert custom decorative elements through the reserved slots; S4: Write component scripts; define props and responsive data in scriptsetup or script, and use computed properties to handle values ​​that need to be dynamically calculated; S5: Customize the appearance of the circular progress bar through CSS or inline styles, including: color gradient of the progress bar, style of the progress bar text, and background style of the progress bar.

2. According to the method for developing a customized circular progress bar component based on ElementPlus in claim 1, it is characterized in that: Adjust the layout or appearance of a container by adding styles to the component's stylescoped.

3. The method for developing a customized circular progress bar component based on ElementPlus as claimed in claim 1, characterized in that: The configurable properties of the extended circular progress bar include: percentage, circular progress bar size, line width, color, progress bar status, whether to display text internally, text font format, decorative elements, and decorative element data.

4. The method for developing a customized circular progress bar component based on ElementPlus as claimed in claim 1, characterized in that: Use the stroke-dasharray and stroke-dashoffset properties to control the display progress of the progress bar.

5. The method for developing a customized circular progress bar component based on ElementPlus as claimed in claim 1, characterized in that: Use methods to handle user interactions or animation effects.

6. The method for developing a customized circular progress bar component based on ElementPlus as claimed in claim 1, characterized in that: Dynamically change colors and styles by changing CSS properties dynamically through JavaScript; use CSS transition properties or @keyframes animations to create smooth progress change effects.

7. A device for developing a customized circular progress bar component based on ElementPlus, comprising a processor and a memory storing program instructions, characterized in that: The processor is configured to execute the method for developing a customized circular progress bar component based on ElementPlus as described in any one of claims 1 to 5 when running the program instructions.

8. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the program is executed by a processor, the method described in any one of claims 1 to 5 is implemented.

Images