mirror of https://github.com/ElemeFE/element
Progress: add color attribute (#10352)
云游君
杨奕
parent
d9bcaacc74
commit
0b330126c7
|
|
@ -19,6 +19,7 @@ Progress is used to show the progress of current operation, and inform the user
|
|||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -32,6 +33,7 @@ In this case the percentage takes no additional space.
|
|||
```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>
|
||||
```
|
||||
|
|
@ -43,6 +45,7 @@ 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="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -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 |
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
|
|||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -30,6 +31,7 @@ En este caso el porcentage no toma espacio adicional.
|
|||
```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>
|
||||
```
|
||||
|
|
@ -41,6 +43,7 @@ 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="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -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 |
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
```html
|
||||
<el-progress :percentage="0"></el-progress>
|
||||
<el-progress :percentage="70"></el-progress>
|
||||
<el-progress :percentage="80" color="#8e71c7"></el-progress>
|
||||
<el-progress :percentage="100" status="success"></el-progress>
|
||||
<el-progress :percentage="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
```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>
|
||||
```
|
||||
|
|
@ -47,6 +49,7 @@
|
|||
```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="50" status="exception"></el-progress>
|
||||
```
|
||||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<el-progress :percentage="50" color="rgb(0, 0, 0)"></el-progress>
|
||||
`
|
||||
}, true);
|
||||
expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue