进展
进度用于显示当前操作的进度，告知用户当前的状态。
线性进度条
使用 percentage 属性设置百分比。这是必填，并且必须在 0-100 之间。您可以通过设置 format 自定义文本格式。
50%
Full
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 属性决定进度条的 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 attr 设置进度条颜色。它接受颜色字符串、函数或数组。
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 from '~icons/ep/minus'
import Plus from '~icons/ep/plus'
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>隐藏来源
圆形进度条
您可以为circle指定type属性来使用圆形进度条，并使用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>隐藏来源
仪表板进度条
您还可以为 dashboard 指定 type 属性以使用仪表板进度条。
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 from '~icons/ep/minus'
import Plus from '~icons/ep/plus'
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>隐藏来源
定制内容
使用默认插槽添加自定义内容。
Content
80%Progressing
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 '~icons/ep/check'
</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%
Full
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 from '~icons/ep/minus'
import Plus from '~icons/ep/plus'
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
属性
| 名称 | 描述 | 类型 | 默认 | | --------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ---- | --- | | 百分比^（必填） | 百分比 | 编号 | 0 | | 类型 | 进度条的类型 | 枚举 | 线 | | 笔划宽度 | 进度条的宽度 | 数字 | 6 | | 内文 | 是否将百分比放在进度条内，仅当 type 为 'line' 时有效 | 布尔值 | 假 | | 状态 | 进度条的当前状态 | 枚举 | — | | 不确定 | 设置不确定的进度 | 布尔值 | 假 | | 持续时间 | 控制不确定进度或条纹流进度的动画持续时间 | 数字 | 3 | | 颜色 | 进度条的背景颜色。覆盖 status 道具 | 字符串 / 函数 / 数组 | '' | | 宽度 | 圆形进度条的画布宽度 | 数字 | 126 | 126 | | 显示文本 | 是否显示百分比 | 布尔值 | 真实 | | 笔划线帽 | 结束路径处的圆形/仪表板类型形状 | 枚举 | 圆形 | | 格式 | 自定义文本格式 | 功能 | — | | 条纹 2.3.4 | 进度条颜色上的条纹 | 布尔值 | 假 | | 条纹流 2.3.4 | 让条纹流动 | 布尔值 | 假 |
老虎机
| 名称 | 描述 | 类型 |
|---|---|---|
| 默认 | 定制内容 | 对象 |