Skip to content

E
Element
Commit 6af04e87 authored by hetech's avatar hetech Committed by GitHub
Browse files
Options

Progress: add dashboard progress bar & add custom color (#11867)

parent 90448d67
Hide whitespace changes
Inline Side-by-side
Showing with 746 additions and 86 deletions
examples/docs/en-US/progress.md
View file @ 6af04e87
......@@ -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 |
examples/docs/es/progress.md
View file @ 6af04e87
## 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 |
examples/docs/fr-FR/progress.md
View file @ 6af04e87
......@@ -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 |
examples/docs/zh-CN/progress.md
View file @ 6af04e87
......@@ -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 |
packages/progress/src/progress.vue
View file @ 6af04e87
......@@ -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;
});
}
}
};
......
packages/theme-chalk/src/progress.scss
View file @ 6af04e87
......@@ -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;
......
test/unit/specs/progress.spec.js
View file @ 6af04e87
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%');
});
});
types/progress.d.ts
View file @ 6af04e87
......@@ -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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment