mirror of https://github.com/ElemeFE/element
				
				
				
			
							parent
							
								
									16a6059ed8
								
							
						
					
					
						commit
						613dd1a36d
					
				| 
						 | 
				
			
			@ -37,8 +37,7 @@ In this case the percentage takes no additional space.
 | 
			
		|||
<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>
 | 
			
		||||
<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
 | 
			
		||||
```
 | 
			
		||||
``` 
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
### Attributes
 | 
			
		||||
| 
						 | 
				
			
			@ -48,7 +47,7 @@ In this case the percentage takes no additional space.
 | 
			
		|||
| type | the type of progress bar | string | line/circle | 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/text | — |
 | 
			
		||||
| status | the current status of progress bar | string | success/exception | — |
 | 
			
		||||
| color  | background color of progress bar. Overrides `status` prop | string | — | — |
 | 
			
		||||
| width | the canvas width of circle progress bar | number | — | 126 |
 | 
			
		||||
| show-text | whether to show percentage | boolean | — | true |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -35,7 +35,6 @@ En este caso el porcentage no toma espacio adicional.
 | 
			
		|||
<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>
 | 
			
		||||
<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
 | 
			
		||||
```
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -46,7 +45,7 @@ En este caso el porcentage no toma espacio adicional.
 | 
			
		|||
| type         | tipo de barra de progreso                | string  | line/circle       | 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/text | —           |
 | 
			
		||||
| 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     | — |       — |
 | 
			
		||||
| width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | 
			
		||||
| show-text    | mostrar porcentaje                       | boolean | —                 | true        |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -40,7 +40,6 @@
 | 
			
		|||
<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>
 | 
			
		||||
<el-progress type="circle" :percentage="100" status="text">Done</el-progress>
 | 
			
		||||
```
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -51,7 +50,7 @@
 | 
			
		|||
| type          | 进度条类型           | string         | line/circle | line |
 | 
			
		||||
| stroke-width  | 进度条的宽度,单位 px | number          | — | 6 |
 | 
			
		||||
| text-inside  | 进度条显示文字内置在进度条内(只在 type=line 时可用) | boolean | — | false |
 | 
			
		||||
| status  | 进度条当前状态 | string | success/exception/text | — |
 | 
			
		||||
| status  | 进度条当前状态 | string | success/exception | — |
 | 
			
		||||
| color  | 进度条背景色(会覆盖 status 状态颜色) | string | — | — |
 | 
			
		||||
| width  | 环形进度条画布宽度(只在 type=circle 时可用) | number |  | 126 |
 | 
			
		||||
| show-text  | 是否显示进度条文字内容 | boolean | — | true |
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -27,12 +27,13 @@
 | 
			
		|||
        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
 | 
			
		||||
      </svg>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}">
 | 
			
		||||
    <div
 | 
			
		||||
      class="el-progress__text"
 | 
			
		||||
      v-if="showText && !textInside"
 | 
			
		||||
      :style="{fontSize: progressTextSize + 'px'}"
 | 
			
		||||
    >
 | 
			
		||||
      <template v-if="!status">{{percentage}}%</template>
 | 
			
		||||
      <template v-else>
 | 
			
		||||
        <slot v-if="status === 'text'"></slot>
 | 
			
		||||
        <i v-else :class="iconClass"></i>
 | 
			
		||||
      </template>
 | 
			
		||||
      <i v-else :class="iconClass"></i>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
| 
						 | 
				
			
			@ -52,8 +53,7 @@
 | 
			
		|||
        validator: val => val >= 0 && val <= 100
 | 
			
		||||
      },
 | 
			
		||||
      status: {
 | 
			
		||||
        type: String,
 | 
			
		||||
        validator: val => ['text', 'success', 'exception'].indexOf(val) > -1
 | 
			
		||||
        type: String
 | 
			
		||||
      },
 | 
			
		||||
      strokeWidth: {
 | 
			
		||||
        type: Number,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -33,7 +33,6 @@ describe('Progress', () => {
 | 
			
		|||
          <el-progress ref="lineException" :percentage="0" status="exception"></el-progress>
 | 
			
		||||
          <el-progress type="circle" ref="circleSuccess" :percentage="100" status="success"></el-progress>
 | 
			
		||||
          <el-progress type="circle" ref="circleException" :percentage="0" status="exception"></el-progress>
 | 
			
		||||
          <el-progress type="circle" ref="textException" :percentage="100" status="text">Done</el-progress>
 | 
			
		||||
        </div>
 | 
			
		||||
      `
 | 
			
		||||
    }, true);
 | 
			
		||||
| 
						 | 
				
			
			@ -46,7 +45,6 @@ describe('Progress', () => {
 | 
			
		|||
    expect(vm.$refs.circleSuccess.$el.querySelector('.el-progress__text .el-icon-check')).to.be.exist;
 | 
			
		||||
    expect(vm.$refs.circleException.$el.classList.contains('is-exception')).to.be.true;
 | 
			
		||||
    expect(vm.$refs.circleException.$el.querySelector('.el-progress__text .el-icon-close')).to.be.exist;
 | 
			
		||||
    expect(vm.$refs.textException.$el.querySelector('.el-progress__text').innerText).to.be.equal('Done');
 | 
			
		||||
  });
 | 
			
		||||
  it('text inside', () => {
 | 
			
		||||
    vm = createVue({
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,7 @@
 | 
			
		|||
import { ElementUIComponent } from './component'
 | 
			
		||||
 | 
			
		||||
export type ProgressType = 'line' | 'circle'
 | 
			
		||||
export type ProgressStatus = 'success' | 'exception' | 'text'
 | 
			
		||||
export type ProgressStatus = 'success' | 'exception'
 | 
			
		||||
 | 
			
		||||
/** Progress Component */
 | 
			
		||||
export declare class ElProgress extends ElementUIComponent {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue