进度条
进度条用于显示当前操作的进度，并告知用户当前状态。
直线型进度条
使用 percentage 属性设置进度百分比。它是必填项，值必须在 0-100 之间。你可以通过设置 format 来自定义文本格式。
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
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| 百分比 必填 | 百分比 | number | 0 |
| type | 进度条类型 | 枚举 | 直线型 |
| 进度条的宽度 | 进度条的宽度 | number | 6 |
| 文字内显 | 是否将百分比显示在进度条内部，仅在 type 为 'line' 时有效 | boolean | false |
| 当前状态 | 进度条当前状态 | 枚举 | — |
| 不确定状态 | 设置不确定进度 | boolean | false |
| duration | 控制不确定进度或条纹流动进度的动画持续时间 | number | 3 |
| color | 进度条的背景色。会覆盖 status 属性 | string / function / Array | '' |
| width | 环形进度条画布宽度 | number | 126 |
| 显示文本 | 是否显示百分比 | boolean | true |
| 描边端点样式 | 环形/仪表盘型进度条末端的形状 | 枚举 | 圆角 |
| format | 自定义文本格式 | Function | — |
| 条纹 2.3.4 | 进度条颜色上的条纹 | boolean | false |
| 条纹流动 2.3.4 | 使条纹流动 | boolean | false |
插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | 自定义内容 | object |
来源
贡献者
