Skip to content

Progress

Progress 是一个进度条组件,用于展示操作的当前进度、状态和完成程度,帮助用户了解长时间任务的执行情况,常用于文件上传、数据加载、操作处理等场景。

引入

typescript
import { Progress } from '@versakit/vue'

使用

loading

API

属性

属性名说明类型默认值
value进度值,范围0-100number0
max最大值number100
showText是否显示进度文本booleanfalse
variant进度条样式变体'default' | 'success' | 'warning' | 'danger' | 'info''default'
size进度条大小'sm' | 'md' | 'lg''md'
shape进度条形状'flat' | 'rounded' | 'pill''rounded'
striped是否显示条纹效果booleanfalse
animated是否显示动画效果booleanfalse
indeterminate是否为不确定状态booleanfalse
unstyled是否使用无样式模式booleanfalse
pt传递模板样式ProgressPT-

事件

事件名说明回调参数
update:value进度变化时触发(value: number) => void

插槽

插槽名说明
text自定义进度文本

样式定制

当使用 unstyled 模式时,可以通过 pt 属性传递自定义样式:

typescript
interface ProgressPT {
	root?: string
	container?: string
	bar?: string
	text?: string
}