Progress 进度条

用于展示操作的当前进度。

?

名称	分类	说明	类型	默认值
type	? 风格	进度条类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
variant	? 风格	填充图案变体	'solid' | 'striped' | 'checkered'	'solid'
textInside	? 风格	文字是否显示在进度条内部	boolean	false
size	? 尺寸	进度条尺寸	'large' | 'default' | 'small'	'default'
strokeWidth	? 尺寸	自定义进度条高度（像素值）	number	0
color	? 颜色	自定义颜色，支持十六进制或函数	string | (percentage: number) => string	—
status	? 状态	进度条状态，会覆盖 type 的颜色	'success' | 'warning' | 'danger'	—
stripedFlow	? 行为	条纹流动动画（仅在 variant="striped" 时有效）	boolean	false
indeterminate	? 行为	不确定进度（来回弹跳）	boolean	false
showText	? 行为	是否显示百分比文字	boolean	true
percentage	? 内容	百分比值（0-100），超出范围会被自动钳制	number	0
format	? 内容	自定义文字格式化函数	(percentage: number) => string	—
clampedPercentage	? 暴露	经过钳制的百分比值（0-100）	number	—

基础用法

设置 percentage 属性表示当前进度，值会被钳制在 0 到 100 之间。

<template>
  <div class="demo-progress">
    <px-progress :percentage="50" />
    <px-progress :percentage="80" />
    <px-progress :percentage="100" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

不同类型

通过 type 属性设置不同的颜色。

<template>
  <div class="demo-progress">
    <px-progress :percentage="30" type="primary" />
    <px-progress :percentage="50" type="success" />
    <px-progress :percentage="60" type="info" />
    <px-progress :percentage="70" type="warning" />
    <px-progress :percentage="40" type="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

不同尺寸

提供 large、default 和 small 三种尺寸。

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" size="large" />
    <px-progress :percentage="60" />
    <px-progress :percentage="60" size="small" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

内部文字

使用 text-inside 将百分比文字显示在进度条内部。

<template>
  <div class="demo-progress">
    <px-progress :percentage="70" text-inside type="primary" />
    <px-progress :percentage="85" text-inside type="success" />
    <px-progress :percentage="45" text-inside type="warning" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

填充变体

通过 variant 选择填充图案：solid（纯色）、striped（条纹）或 checkered（棋盘格）。

<template>
  <div class="demo-progress">
    <px-progress :percentage="65" variant="solid" type="primary" />
    <px-progress :percentage="65" variant="striped" type="success" />
    <px-progress :percentage="65" variant="checkered" type="warning" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

条纹流动

配合 variant="striped" 使用 striped-flow 可实现条纹动画效果。

<template>
  <div class="demo-progress">
    <px-progress :percentage="70" variant="striped" striped-flow type="primary" />
    <px-progress :percentage="55" variant="striped" striped-flow type="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

不确定进度

使用 indeterminate 属性表示未知进度，进度条会以像素风格的 steps() 动画来回弹跳。

<template>
  <div class="demo-progress">
    <px-progress indeterminate type="primary" />
    <px-progress indeterminate variant="striped" type="success" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

自定义颜色

通过 color 属性传入十六进制颜色值或根据当前百分比返回颜色的函数。

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" color="#ff6600" />
    <px-progress :percentage="percentage" :color="dynamicColor" />
    <div>
      <px-button size="small" @click="decrease"><px-icon icon="minus" /></px-button>
      <px-button size="small" @click="increase"><px-icon icon="plus" /></px-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const percentage = ref(30);

const dynamicColor = (p: number) => {
  if (p < 30) return '#f56c6c';
  if (p < 70) return '#e6a23c';
  return '#67c23a';
};

const increase = () => {
  percentage.value = Math.min(100, percentage.value + 10);
};
const decrease = () => {
  percentage.value = Math.max(0, percentage.value - 10);
};
</script>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

自定义文字格式

通过 format 属性自定义显示的文字。

<template>
  <div class="demo-progress">
    <px-progress :percentage="60" :format="hpFormat" type="danger" />
    <px-progress :percentage="75" :format="stepsFormat" type="success" />
  </div>
</template>

<script setup lang="ts">
const hpFormat = (p: number) => `${Math.round(p * 2)}/200 HP`;
const stepsFormat = (p: number) => `${Math.round(p / 25)}/4 ★`;
</script>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

状态

使用 status 属性覆盖 type 的颜色，赋予语义化状态。

<template>
  <div class="demo-progress">
    <px-progress :percentage="100" status="success" />
    <px-progress :percentage="50" status="warning" />
    <px-progress :percentage="30" status="danger" />
  </div>
</template>

<style scoped>
.demo-progress {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>