Progress 进度条

进度条（Progress）用于展示操作或任务的当前进度，帮助用户了解处理状态。

基础用法

使用 v-model 进行双向绑定，或通过 :value 传入静态值。默认 max=100。

<!-- 静态值 -->
<TProgress :value="75" />

<!-- 双向绑定 -->
<TProgress v-model:value="progVal" showLabel />

颜色

通过 color 属性设置进度条颜色，支持所有 Tabler 预设色。

<TProgress :value="75" color="primary" />
<TProgress :value="60" color="success" />
<TProgress :value="45" color="danger" />
<TProgress :value="30" color="warning" />
<TProgress :value="90" color="info" />

显示百分比标签

开启 showLabel 属性可在进度条上显示百分比文字。

<TProgress :value="68" showLabel />

条纹进度条

开启 striped 属性可为进度条添加条纹动画效果。

<TProgress :value="50" striped showLabel />

不确定状态

当进度未知或持续加载时，使用 indeterminate 属性显示循环动画。

<TProgress indeterminate />

尺寸

通过 sm 属性切换到小尺寸（默认高度为普通尺寸）。

<TProgress :value="75" sm showLabel />
<TProgress :value="75" showLabel />

原生 progress 元素

开启 native 属性将渲染为 HTML <progress> 元素，适合需要浏览器原生进度条的场景。

<TProgress :value="50" native />

多条进度

通过 <TProgress> 容器嵌套多个 <TProgressBar> 子组件，可以实现分段进度条。

<TProgress>
  <TProgressBar :value="30" color="primary" />
  <TProgressBar :value="50" color="success" />
  <TProgressBar :value="10" color="danger" />
</TProgress>

TProgressBar 同样支持 striped、showLabel 等属性。

<TProgress>
  <TProgressBar :value="40" color="primary" striped showLabel />
  <TProgressBar :value="25" color="warning" />
  <TProgressBar :value="20" color="success" showLabel />
</TProgress>

程序化控制

通过 step 控制每次调用 advance() 增加的进度值，initial 控制起始位置。调用 reset() 可回到起始值。监听 @complete 事件可在进度到达 max 时做出响应。

advance() 和 reset() 直接修改 v-model 绑定的值，无需手动处理事件。

查看代码

<script setup>
const progRef = ref()
const progVal = ref(10)

function onComplete() {
  console.log('进度已达到 100%！')
}
</script>

<template>
  <TProgress ref="progRef" v-model:value="progVal" :initial="10" :step="15" showLabel @complete="onComplete" />
  <t-button @click="progRef?.advance()">前进 (+15)</t-button>
  <t-button @click="progRef?.reset()">重置</t-button>
</template>

API

TProgress 属性 (Props)

属性名	说明	类型	默认值
v-model:value	当前进度值 (0–max)	number	0
max	最大值	number	100
sm	是否使用小尺寸	boolean	false
color	进度条颜色	TablerColor	'primary'
striped	是否显示条纹动画	boolean	false
indeterminate	是否为不确定状态（循环动画）	boolean	false
native	是否渲染为原生 <progress> 元素	boolean	false
showLabel	是否显示百分比标签	boolean	false
step	步长，调用 advance() 时每次增加的值	number	10
initial	起始位置，调用 reset() 时回到该值	number	0

TProgress 方法 (Methods)

通过模板引用 (ref) 调用。

方法名	返回值	说明
advance()	—	按 step 步长增加进度，到达 max 时触发 @complete 事件
reset()	—	重置进度到 initial 值
current	number	响应式的当前进度值（可通过 ref 访问）

TProgress 事件 (Events)

事件名	说明
@complete	进度到达 max 时触发

TProgress 插槽 (Slots)

插槽名	说明
default	用于传入多个 <TProgressBar> 组件，实现多条进度。

TProgressBar 属性 (Props)

属性名	说明	类型	默认值
value	当前进度值 (0–max)	number	必填
max	最大值	number	100
color	进度条颜色	TablerColor	'primary'
striped	是否显示条纹动画	boolean	false
indeterminate	是否为不确定状态	boolean	false
showLabel	是否显示百分比标签	boolean	false