Progressbar component practical case analysis

This time I will bring you a practical case analysis of the progressbar component. What are the precautions for the practical use of the progressbar component? The following is a practical case, let's take a look.

Rendering

First of all, let’s take a look at the effect of the progress bar component. The following figure shows the progress bar component

##Implementation process

◾ Project construction

The progressbar component is built in an npm package that can be run directly, through Yeoman, and then through the Gulp Webpack build tool to generate The working directory is as follows, and the contents of each folder are the same as the previous article

progressbar component working directory

◾ progressbar source file template

The progressbar component is in the form of a .vue file, and the template part is as follows

The progressbar source file template part

We can analyze it , the progressbar component mainly has the following attributes:

1. type, controlled by type variables, such as warning, danger, success, info, etc.;

2. Whether it is dynamic, use the animate variable to control;

3. The current value, use the value variable to control;

4. The maximum value, use the max variable to control ;

5. Percentage, controlled by the percent variable, which is calculated through value and max values, is a calculated attribute of Vue;

6. The displayed percentage value is controlled by the valueText value and is a calculated property of Vue

◾ progressbar source file script

progressbar The script part of the component

◾ The style of the progressbar component

The style part has a lot of content. First, let’s look at the basic css properties of progressbar, including the progress and progress-bar parts

Basic css part

Then look at the css styles that represent different colors

The css that represents colors Style

Finally, let’s look at the css style that represents the animation effect

The css style that represents the animation effect

◾ Example

After completing the above steps, you can complete a progressbar component. Next, let’s look at the use of the progressbar component. If it can be run, you can see the effect of the article at the beginning.

Usage of progressbar component

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to encrypt and decrypt base64

How to use JS to get the dates of the last 7 days and the last 3 days

The above is the detailed content of Progressbar component practical case analysis. For more information, please follow other related articles on the PHP Chinese website!