Tuff
|Docs
组件/Progress 进度

Progress 进度

基于 TxProgressBar 的线性进度行

已验证自 0.3.4

用法

状态

status 设置状态色。

示例加载中...

进度行

示例加载中...

自定义文本

<template>
  <TuffProgress :percentage="42" :format="value => `完成 ${value}%`" />
</template>

不确定进度

<template>
  <TuffProgress indeterminate :percentage="60" :show-text="false" />
</template>

最佳实践

  • 简单的行级进度用 TuffProgress；需要分段、tooltip、message、loading/success/error 状态、动效或自定义文本位置时，直接用 TxProgressBar。
  • strokeWidth 保持克制；本组件面向行级进度，不用于大号指标。
  • 时长未知的任务用 indeterminate，没有可信数值时隐藏文本，不要展示过期的百分比。
  • 周围界面需要操作上下文时，搭配简短的状态标签。

API 参考

属性

属性名类型默认值说明
percentagenumber0确定进度值。
status'success' | 'error' | 'warning' | ''''状态色。
strokeWidthnumber6进度条高度（px）。
showTextbooleantrue在进度条外侧显示文本。
indeterminatebooleanfalse不确定进度模式。
format(percentage: number) => string-自定义确定进度的显示文本。

概述

  • 直接渲染 TxProgressBar，不额外包裹 DOM；percentage、status、indeterminate、showText、format 原样转发。
  • strokeWidth 转为 height（如 "6px"）；文本位置固定为 outside，遮罩样式固定为 maskVariant="plain"。
  • 不派发事件、不提供插槽，进度由宿主更新 props 驱动。
  • 确定进度由 TxProgressBar 提供 role="progressbar" 与 aria-valuenow；不确定进度省略 aria-valuenow。

技术实现

  • 安装入口注册组件名 TuffProgress。
  • 源码：packages/tuffex/packages/components/src/progress/。
查看源码
packages/tuffex/packages/components/src/progress/index.ts