Progress 进度条
用于展示操作进度，告知用户当前状态和预期。
线性进度条
使用 `percentage` 属性来设置进度条的百分比，`percentage` 属性是**必填的**，并且必须在 `0-100` 的范围内。 您也可以通过 `format` 方法来格式化 `percentage`。
50%
满
vue
<template>
<div class="demo-progress">
<el-progress :percentage="50" />
<el-progress :percentage="100" :format="format" />
<el-progress :percentage="100" status="success" />
<el-progress :percentage="100" status="warning" />
<el-progress :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
内联百分比
在这种情况下，百分比不会占用额外的空间。
`stroke-width` 属性决定了进度条的宽度，`text-inside` 属性可以使进度条的百分比显示在进度条内部。
70%
100%
80%
50%
vue
<template>
<div class="demo-progress">
<el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
<el-progress
:text-inside="true"
:stroke-width="24"
:percentage="100"
status="success"
/>
<el-progress
:text-inside="true"
:stroke-width="22"
:percentage="80"
status="warning"
/>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
/>
</div>
</template>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
自定义颜色
您可以使用 `color` 属性来设置进度条的颜色。 它接受十六进制颜色值，函数和数组。
20%
20%
20%
20%
vue
<template>
<div class="demo-progress">
<el-progress :percentage="percentage" :color="customColor" />
<el-progress :percentage="percentage" :color="customColorMethod" />
<el-progress :percentage="percentage" :color="customColors" />
<el-progress :percentage="percentage" :color="customColors" />
<div>
<el-button-group>
<el-button :icon="Minus" @click="decrease" />
<el-button :icon="Plus" @click="increase" />
</el-button-group>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'
const percentage = ref(20)
const customColor = ref('#409eff')
const customColors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
]
const customColorMethod = (percentage: number) => {
if (percentage < 30) {
return '#909399'
}
if (percentage < 70) {
return '#e6a23c'
}
return '#67c23a'
}
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
环形进度条
您可以指定 `type` 属性到 `circle` 来使用环形进度条，并通过 `width` 属性来改变环形进度条画布的宽度。
0%
25%
vue
<template>
<div class="demo-progress">
<el-progress type="circle" :percentage="0" />
<el-progress type="circle" :percentage="25" />
<el-progress type="circle" :percentage="100" status="success" />
<el-progress type="circle" :percentage="70" status="warning" />
<el-progress type="circle" :percentage="50" status="exception" />
</div>
</template>
<style scoped>
.demo-progress .el-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
仪表盘样式的进度条
您也可以指定 `type` 属性到 `dashboard` 以使用仪表盘样式的进度条。
10%
0%
vue
<template>
<div class="demo-progress">
<el-progress type="dashboard" :percentage="percentage" :color="colors" />
<el-progress type="dashboard" :percentage="percentage2" :color="colors" />
<div>
<el-button-group>
<el-button :icon="Minus" @click="decrease" />
<el-button :icon="Plus" @click="increase" />
</el-button-group>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'
const percentage = ref(10)
const percentage2 = ref(0)
const colors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
]
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
onMounted(() => {
setInterval(() => {
percentage2.value = (percentage2.value % 100) + 10
}, 500)
})
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
自定义内容
使用默认插槽来添加自定义内容。
内容
80%进行中
vue
<template>
<div class="demo-progress">
<el-progress :percentage="50">
<el-button text>Content</el-button>
</el-progress>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="50"
status="exception"
>
<span>Content</span>
</el-progress>
<el-progress type="circle" :percentage="100" status="success">
<el-button type="success" :icon="Check" circle />
</el-progress>
<el-progress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">Progressing</span>
</template>
</el-progress>
</div>
</template>
<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue'
</script>
<style scoped>
.percentage-value {
display: block;
margin-top: 10px;
font-size: 28px;
}
.percentage-label {
display: block;
margin-top: 10px;
font-size: 12px;
}
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
</style>隐藏源代码
不确定进度
使用 `indeterminate` 属性来设置不确定进度，并使用 `duration` 控制动画持续时间。
50%
满
vue
<template>
<div class="demo-progress">
<el-progress :percentage="50" :indeterminate="true" />
<el-progress :percentage="100" :format="format" :indeterminate="true" />
<el-progress
:percentage="100"
status="success"
:indeterminate="true"
:duration="5"
/>
<el-progress
:percentage="100"
status="warning"
:indeterminate="true"
:duration="1"
/>
<el-progress :percentage="50" status="exception" :indeterminate="true" />
</div>
</template>
<script lang="ts" setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
条纹进度
使用 `striped` 属性来设置条纹进度。 您可以使用 `striped-flow` 属性来使条纹流动，并使用 `duration` 来控制动画持续时间。
50%
vue
<template>
<div class="demo-progress">
<el-progress :percentage="50" :stroke-width="15" striped />
<el-progress
:percentage="30"
:stroke-width="15"
status="warning"
striped
striped-flow
/>
<el-progress
:percentage="100"
:stroke-width="15"
status="success"
striped
striped-flow
:duration="10"
/>
<el-progress
:percentage="percentage"
:stroke-width="15"
status="exception"
striped
striped-flow
:duration="duration"
/>
<el-button-group>
<el-button :icon="Minus" @click="decrease" />
<el-button :icon="Plus" @click="increase" />
</el-button-group>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'
const percentage = ref<number>(70)
const duration = computed(() => Math.floor(percentage.value / 10))
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
</script>
<style scoped>
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
</style>隐藏源代码
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| percentage 必填 | 百分比 | number | 0 |
| type | 进度条类型 | 枚举 | line |
| stroke-width | 进度条的宽度 | number | 6 |
| text-inside | 百分比是否显示在进度条内，仅在 `type` 为 'line' 时可用 | boolean | false |
| status | 进度条当前状态 | 枚举 | — |
| indeterminate | 设置不确定进度 | boolean | false |
| duration | 控制不确定进度或条纹流动进度的动画持续时间 | number | 3 |
| color | 进度条背景色。会覆盖 `status` 属性 | string / function / Array | '' |
| width | 环形进度条画布宽度 | number | 126 |
| show-text | 是否显示进度条文字内容 | boolean | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | 枚举 | 圆角 |
| format | 自定义文本格式 | Function | — |
| striped 2.3.4 | 在进度条颜色上添加条纹 | boolean | false |
| striped-flow 2.3.4 | 使条纹流动 | boolean | false |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 自定义内容 | object |
来源
贡献者
