diff --git a/examples/docs/en-US/progress.md b/examples/docs/en-US/progress.md
index 275009e6f..d208d8f9f 100644
--- a/examples/docs/en-US/progress.md
+++ b/examples/docs/en-US/progress.md
@@ -19,6 +19,7 @@ Progress is used to show the progress of current operation, and inform the user
```html
+
```
@@ -32,6 +33,7 @@ In this case the percentage takes no additional space.
```html
+
```
@@ -43,6 +45,7 @@ In this case the percentage takes no additional space.
```html
+
```
@@ -56,6 +59,6 @@ In this case the percentage takes no additional space.
| 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 | the color of progress bar, can override the color of the current status | string | — | — |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
-
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
index 186559be8..cae68474b 100644
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
@@ -18,6 +18,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
```html
+
```
@@ -30,6 +31,7 @@ En este caso el porcentage no toma espacio adicional.
```html
+
```
@@ -41,6 +43,7 @@ En este caso el porcentage no toma espacio adicional.
```html
+
```
@@ -56,4 +59,3 @@ En este caso el porcentage no toma espacio adicional.
| status | estado actual de la barra de progreso | string | success/exception | — |
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentaje | boolean | — | true |
-
diff --git a/examples/docs/zh-CN/progress.md b/examples/docs/zh-CN/progress.md
index c80d56151..3e2b1e9c1 100644
--- a/examples/docs/zh-CN/progress.md
+++ b/examples/docs/zh-CN/progress.md
@@ -21,6 +21,7 @@
```html
+
```
@@ -35,6 +36,7 @@
```html
+
```
@@ -47,6 +49,7 @@
```html
+
```
@@ -60,5 +63,6 @@
| stroke-width | 进度条的宽度，单位 px | number | — | 6 |
| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
| status | 进度条当前状态 | string | success/exception | — |
+| color | 进度条颜色（自定义时会覆盖 status 状态颜色） | string | — | — |
| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 |
| show-text | 是否显示进度条文字内容 | boolean | — | true |
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 718222cc3..991df85f7 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -70,12 +70,17 @@
showText: {
type: Boolean,
default: true
+ },
+ color: {
+ type: String,
+ default: ''
}
},
computed: {
barStyle() {
const style = {};
style.width = this.percentage + '%';
+ style.backgroundColor = this.color;
return style;
},
relativeStrokeWidth() {
@@ -100,15 +105,19 @@
},
stroke() {
let ret;
- switch (this.status) {
- case 'success':
- ret = '#13ce66';
- break;
- case 'exception':
- ret = '#ff4949';
- break;
- default:
- ret = '#20a0ff';
+ if (this.color) {
+ ret = this.color;
+ } else {
+ switch (this.status) {
+ case 'success':
+ ret = '#13ce66';
+ break;
+ case 'exception':
+ ret = '#ff4949';
+ break;
+ default:
+ ret = '#20a0ff';
+ }
}
return ret;
},
diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js
index 2d6e8f375..71afeb1fb 100644
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@@ -95,4 +95,12 @@ describe('Progress', () => {
}, true);
expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);
});
+ it('color', () => {
+ vm = createVue({
+ template: `
+
+ `
+ }, true);
+ expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
+ });
});