mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-29 18:57:36 +08:00
Progress: add dashboard progress bar & add custom color (#11867)
This commit is contained in:
hetech
GitHub
parent
90448d6786
commit
6af04e8765
@ -2,29 +2,100 @@
|
||||
|
||||
Progress is used to show the progress of current operation, and inform the user the current status.
|
||||
|
||||
### Linear progress bar (external percentage)
|
||||
### Linear progress bar
|
||||
|
||||
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
|
||||
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="100" :format="format"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="warning"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage === 100 ? 'Full' : `${percentage}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Linear progress bar (internal percentage)
|
||||
### Internal percentage
|
||||
|
||||
In this case the percentage takes no additional space.
|
||||
|
||||
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom color
|
||||
|
||||
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399';
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c';
|
||||
} else {
|
||||
return '#67c23a';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -34,20 +105,68 @@ In this case the percentage takes no additional space.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Dashboard progress bar
|
||||
|
||||
You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 10,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --- | ---- | ---- | ---- | ---- |
|
||||
| **percentage** | percentage, **required** | number | 0-100 | 0 |
|
||||
| type | the type of progress bar | string | line/circle | line |
|
||||
| type | the type of progress bar | string | line/circle/dashboard | line |
|
||||
| stroke-width | the width of progress bar | number | — | 6 |
|
||||
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
|
||||
| status | the current status of progress bar | string | success/exception | — |
|
||||
| color | background color of progress bar. Overrides `status` prop | string | — | — |
|
||||
| status | the current status of progress bar | string | success/exception/warning | — |
|
||||
| color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
|
||||
| width | the canvas width of circle progress bar | number | — | 126 |
|
||||
| show-text | whether to show percentage | boolean | — | true |
|
||||
|
||||
@ -1,28 +1,100 @@
|
||||
## Progreso
|
||||
Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
|
||||
|
||||
### Barra de progreso lineal (porcentage externo)
|
||||
### Barra de progreso lineal
|
||||
|
||||
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
|
||||
|
||||
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="100" :format="format"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="warning"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage === 100 ? 'Full' : `${percentage}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Barra de progreso lineal (porcentage interno)
|
||||
### Pporcentage interno
|
||||
En este caso el porcentage no toma espacio adicional.
|
||||
|
||||
:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom color
|
||||
|
||||
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399';
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c';
|
||||
} else {
|
||||
return '#67c23a';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -32,20 +104,67 @@ En este caso el porcentage no toma espacio adicional.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Dashboard progress bar
|
||||
|
||||
:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
|
||||
|
||||
```html
|
||||
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
|
||||
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 10,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|
||||
| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| percentage | porcentaje, requerido | number | 0-100 | 0 |
|
||||
| type | tipo de barra de progreso | string | line/circle | line |
|
||||
| type | tipo de barra de progreso | string | line/circle/dashboard | line |
|
||||
| stroke-width | ancho de la barra de progreso | number | — | 6 |
|
||||
| text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false |
|
||||
| status | estado actual de la barra de progreso | string | success/exception | — |
|
||||
| color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string | — | — |
|
||||
| status | estado actual de la barra de progreso | string | success/exception/warning | — |
|
||||
| color | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
|
||||
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
|
||||
| show-text | mostrar porcentaje | boolean | — | true |
|
||||
|
||||
@ -2,29 +2,100 @@
|
||||
|
||||
Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.
|
||||
|
||||
### Barre de progression linéaire (pourcentage externe)
|
||||
### Barre de progression linéaire
|
||||
|
||||
:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100.
|
||||
:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. You can custom text format by setting `format`.
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="100" :format="format"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="warning"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage === 100 ? 'Full' : `${percentage}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Barre de progression linéaire (pourcentage interne)
|
||||
### Pourcentage interne
|
||||
|
||||
Dans ce cas le pourcentage ne prends pas de place en plus.
|
||||
|
||||
:::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Custom color
|
||||
|
||||
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399';
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c';
|
||||
} else {
|
||||
return '#67c23a';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -34,10 +105,57 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### Dashboard progress bar
|
||||
|
||||
You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 10,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -46,10 +164,10 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
| --- | ---- | ---- | ---- | ---- |
|
||||
| **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
|
||||
| type | Le type de barre. | string | line/circle | line |
|
||||
| type | Le type de barre. | string | line/circle/dashboard | line |
|
||||
| stroke-width | La largeur de la barre. | number | — | 6 |
|
||||
| text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
|
||||
| status | Le statut actuel de la progression. | string | success/exception/text | — |
|
||||
| color | La couleur de fon de la barre. Écrase `status`. | string | — | — |
|
||||
| color | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
|
||||
| width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
|
||||
| show-text | Si le pourcentage doit être affiché. | boolean | — | true |
|
||||
|
||||
@ -2,55 +2,175 @@
|
||||
|
||||
用于展示操作进度，告知用户当前状态和预期。
|
||||
|
||||
### 线形进度条 — 百分比外显
|
||||
### 线形进度条
|
||||
|
||||
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
|
||||
:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
|
||||
|
||||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="100" :format="format"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="100" status="warning"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return percentage === 100 ? '满' : `${percentage}%`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 线形进度条 — 百分比内显
|
||||
### 百分比内显
|
||||
|
||||
百分比不占用额外控件，适用于文件上传等场景。
|
||||
|
||||
:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
|
||||
|
||||
```html
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
|
||||
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义颜色
|
||||
|
||||
可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
|
||||
|
||||
<el-progress :percentage="percentage" :color="customColors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 20,
|
||||
customColor: '#409eff',
|
||||
customColors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColorMethod(percentage) {
|
||||
if (percentage < 30) {
|
||||
return '#909399';
|
||||
} else if (percentage < 70) {
|
||||
return '#e6a23c';
|
||||
} else {
|
||||
return '#67c23a';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 环形进度条
|
||||
|
||||
:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
|
||||
Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<el-progress type="circle" :percentage="0"></el-progress>
|
||||
<el-progress type="circle" :percentage="25"></el-progress>
|
||||
<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success"></el-progress>
|
||||
<el-progress type="circle" :percentage="70" status="warning"></el-progress>
|
||||
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
### 仪表盘形进度条
|
||||
|
||||
:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
|
||||
|
||||
```html
|
||||
|
||||
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
|
||||
<div>
|
||||
<el-button-group>
|
||||
<el-button icon="el-icon-minus" @click="decrease"></el-button>
|
||||
<el-button icon="el-icon-plus" @click="increase"></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
percentage: 10,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#5cb87a', percentage: 60},
|
||||
{color: '#1989fa', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage += 10;
|
||||
if (this.percentage > 100) {
|
||||
this.percentage = 100;
|
||||
}
|
||||
},
|
||||
decrease() {
|
||||
this.percentage -= 10;
|
||||
if (this.percentage < 0) {
|
||||
this.percentage = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
|
||||
| type | 进度条类型 | string | line/circle | line |
|
||||
| **percentage** | **百分比（必填）** | number | 0-100 | 0 |
|
||||
| type | 进度条类型 | string | line/circle/dashboard | line |
|
||||
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
|
||||
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
|
||||
| status | 进度条当前状态 | string | success/exception | — |
|
||||
| color | 进度条背景色（会覆盖 status 状态颜色） | string | — | — |
|
||||
| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 |
|
||||
| status | 进度条当前状态 | string | success/exception/warning | — |
|
||||
| color | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
|
||||
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | | 126 |
|
||||
| show-text | 是否显示进度条文字内容 | boolean | — | true |
|
||||
|
||||
@ -17,14 +17,27 @@
|
||||
<div class="el-progress-bar" v-if="type === 'line'">
|
||||
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
|
||||
<div class="el-progress-bar__inner" :style="barStyle">
|
||||
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
|
||||
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
|
||||
<path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
|
||||
<path
|
||||
class="el-progress-circle__track"
|
||||
:d="trackPath"
|
||||
stroke="#e5e9f2"
|
||||
:stroke-width="relativeStrokeWidth"
|
||||
fill="none"
|
||||
:style="trailPathStyle"></path>
|
||||
<path
|
||||
class="el-progress-circle__path"
|
||||
:d="trackPath"
|
||||
:stroke="stroke"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
:stroke-width="percentage ? relativeStrokeWidth : 0"
|
||||
:style="circlePathStyle"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
@ -32,7 +45,7 @@
|
||||
v-if="showText && !textInside"
|
||||
:style="{fontSize: progressTextSize + 'px'}"
|
||||
>
|
||||
<template v-if="!status">{{percentage}}%</template>
|
||||
<template v-if="!status">{{content}}</template>
|
||||
<i v-else :class="iconClass"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,7 +57,7 @@
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line',
|
||||
validator: val => ['line', 'circle'].indexOf(val) > -1
|
||||
validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
@ -53,7 +66,8 @@
|
||||
validator: val => val >= 0 && val <= 100
|
||||
},
|
||||
status: {
|
||||
type: String
|
||||
type: String,
|
||||
validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
@ -72,41 +86,65 @@
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
type: [String, Array, Function],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
format: Function
|
||||
},
|
||||
computed: {
|
||||
barStyle() {
|
||||
const style = {};
|
||||
style.width = this.percentage + '%';
|
||||
style.backgroundColor = this.color;
|
||||
style.backgroundColor = this.getCurrentColor(this.percentage);
|
||||
return style;
|
||||
},
|
||||
relativeStrokeWidth() {
|
||||
return (this.strokeWidth / this.width * 100).toFixed(1);
|
||||
},
|
||||
radius() {
|
||||
if (this.type === 'circle' || this.type === 'dashboard') {
|
||||
return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
trackPath() {
|
||||
const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
|
||||
|
||||
return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
|
||||
const radius = this.radius;
|
||||
const isDashboard = this.type === 'dashboard';
|
||||
return `
|
||||
M 50 50
|
||||
m 0 ${isDashboard ? '' : '-'}${radius}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
|
||||
a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
|
||||
`;
|
||||
},
|
||||
perimeter() {
|
||||
const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
|
||||
return 2 * Math.PI * radius;
|
||||
return 2 * Math.PI * this.radius;
|
||||
},
|
||||
rate() {
|
||||
return this.type === 'dashboard' ? 0.75 : 1;
|
||||
},
|
||||
strokeDashoffset() {
|
||||
const offset = -1 * this.perimeter * (1 - this.rate) / 2;
|
||||
return `${offset}px`;
|
||||
},
|
||||
trailPathStyle() {
|
||||
return {
|
||||
strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset
|
||||
};
|
||||
},
|
||||
circlePathStyle() {
|
||||
const perimeter = this.perimeter;
|
||||
return {
|
||||
strokeDasharray: `${perimeter}px,${perimeter}px`,
|
||||
strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
|
||||
transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
|
||||
strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
|
||||
strokeDashoffset: this.strokeDashoffset,
|
||||
transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
|
||||
};
|
||||
},
|
||||
stroke() {
|
||||
let ret;
|
||||
if (this.color) {
|
||||
ret = this.color;
|
||||
ret = this.getCurrentColor(this.percentage);
|
||||
} else {
|
||||
switch (this.status) {
|
||||
case 'success':
|
||||
@ -115,6 +153,9 @@
|
||||
case 'exception':
|
||||
ret = '#ff4949';
|
||||
break;
|
||||
case 'warning':
|
||||
ret = '#e6a23c';
|
||||
break;
|
||||
default:
|
||||
ret = '#20a0ff';
|
||||
}
|
||||
@ -122,6 +163,9 @@
|
||||
return ret;
|
||||
},
|
||||
iconClass() {
|
||||
if (this.status === 'warning') {
|
||||
return 'el-icon-warning';
|
||||
}
|
||||
if (this.type === 'line') {
|
||||
return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
|
||||
} else {
|
||||
@ -132,6 +176,47 @@
|
||||
return this.type === 'line'
|
||||
? 12 + this.strokeWidth * 0.4
|
||||
: this.width * 0.111111 + 2 ;
|
||||
},
|
||||
content() {
|
||||
if (typeof this.format === 'function') {
|
||||
return this.format(this.percentage) || '';
|
||||
} else {
|
||||
return `${this.percentage}%`;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentColor(percentage) {
|
||||
if (typeof this.color === 'function') {
|
||||
return this.color(percentage);
|
||||
} else if (typeof this.color === 'string') {
|
||||
return this.color;
|
||||
} else {
|
||||
return this.getLevelColor(percentage);
|
||||
}
|
||||
},
|
||||
getLevelColor(percentage) {
|
||||
const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
|
||||
|
||||
for (let i = 0; i < colorArray.length; i++) {
|
||||
if (colorArray[i].percentage > percentage) {
|
||||
return colorArray[i].color;
|
||||
}
|
||||
}
|
||||
return colorArray[colorArray.length - 1].color;
|
||||
},
|
||||
getColorArray() {
|
||||
const color = this.color;
|
||||
const span = 100 / color.length;
|
||||
return color.map((seriesColor, index) => {
|
||||
if (typeof seriesColor === 'string') {
|
||||
return {
|
||||
color: seriesColor,
|
||||
progress: (index + 1) * span
|
||||
};
|
||||
}
|
||||
return seriesColor;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include m(circle) {
|
||||
@include m((circle,dashboard)) {
|
||||
display: inline-block;
|
||||
|
||||
.el-progress__text {
|
||||
@ -39,6 +39,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include m(without-text) {
|
||||
.el-progress__text {
|
||||
display: none;
|
||||
@ -68,6 +69,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include when(warning) {
|
||||
.el-progress-bar__inner {
|
||||
background-color: $--color-warning;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
color: $--color-warning;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(exception) {
|
||||
.el-progress-bar__inner {
|
||||
background-color: $--color-danger;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { createVue, destroyVM } from '../util';
|
||||
import { createVue, destroyVM, waitImmediate } from '../util';
|
||||
|
||||
describe('Progress', () => {
|
||||
let vm;
|
||||
@ -78,6 +78,14 @@ describe('Progress', () => {
|
||||
}, true);
|
||||
expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
|
||||
});
|
||||
it('dashboard', () => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-progress type="dashboard" :percentage="50"></el-progress>
|
||||
`
|
||||
}, true);
|
||||
expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;
|
||||
});
|
||||
it('width', () => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
@ -103,4 +111,81 @@ describe('Progress', () => {
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
|
||||
});
|
||||
it('color is function', async() => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-progress :percentage="percentage" :color="customColor"></el-progress>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
percentage: 50
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
customColor(percentage) {
|
||||
if (percentage > 50) {
|
||||
return '#13ce66';
|
||||
} else {
|
||||
return '#20a0ff';
|
||||
}
|
||||
},
|
||||
increase() {
|
||||
this.percentage = 60;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
|
||||
vm.increase();
|
||||
|
||||
await waitImmediate();
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
|
||||
});
|
||||
|
||||
it('color is array', async() => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-progress :percentage="percentage" :color="colors"></el-progress>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
percentage: 50,
|
||||
colors: [
|
||||
{color: '#f56c6c', percentage: 20},
|
||||
{color: '#e6a23c', percentage: 40},
|
||||
{color: '#20a0ff', percentage: 60},
|
||||
{color: '#13ce66', percentage: 80},
|
||||
{color: '#6f7ad3', percentage: 100}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
increase() {
|
||||
this.percentage = 70;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
|
||||
// #20a0ff
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
|
||||
|
||||
vm.increase();
|
||||
await waitImmediate();
|
||||
// #13ce66
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
|
||||
});
|
||||
|
||||
it('format content', () => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-progress :percentage="50" :format="format"></el-progress>
|
||||
`,
|
||||
methods: {
|
||||
format(percentage) {
|
||||
return `占比${percentage}%`;
|
||||
}
|
||||
}
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');
|
||||
});
|
||||
});
|
||||
|
||||
5
types/progress.d.ts
vendored
5
types/progress.d.ts
vendored
@ -21,11 +21,14 @@ export declare class ElProgress extends ElementUIComponent {
|
||||
status: ProgressStatus
|
||||
|
||||
/** Background color of progress bar. Overrides `status` prop */
|
||||
color: string
|
||||
color: string | Function | Array<string | { color: string, percentage: number }>
|
||||
|
||||
/** The canvas width of circle progress bar */
|
||||
width: number
|
||||
|
||||
/** Whether to show percentage */
|
||||
showText: boolean
|
||||
|
||||
/** Template function of the content */
|
||||
format(percentage: number): string
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user