Progress 进度条

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

组件类型

基本用法

设置百分比 percentage。

<wd-progress :percentage="50" />

内置百分比

通过 percent-position 配置百分比显示在进度条内部，并设置对齐方式。

<wd-progress :percentage="50" :percent-position="{ type: 'inner', align: 'center' }" />
<wd-progress :percentage="50" status="success" :percent-position="{ type: 'inner', align: 'right' }" />
<wd-progress :percentage="50" status="danger" :percent-position="{ type: 'inner', align: 'left' }" />

组件状态

状态

设置 status，告知用户当前状态和预期。

<wd-progress :percentage="50" status="success" hide-text />
<wd-progress :percentage="50" status="danger" hide-text />
<wd-progress :percentage="50" status="warning" hide-text />

组件样式

隐藏进度文字

设置 hide-text 隐藏进度文字。

<wd-progress :percentage="50" hide-text />

修改颜色

设置 color 修改进度条颜色。

<wd-progress :percentage="50" color="var(--wot-color-theme, #0083ff)" />
<wd-progress :percentage="50" color="var(--wot-color-success, #00c740)" />
<wd-progress :percentage="50" color="var(--wot-color-warning, #ffb300)" />

颜色数组

color 也可以设置为颜色数组或 ProgressColor[]。当传入字符串数组时，组件会自动计算每段颜色对应的进度边界。

<wd-progress :percentage="50" :color="['#00c740', '#ffb300', '#e2231a', '#0083ff']" />
<wd-progress :percentage="50" :color="colorObject" />

import type { ProgressColor } from '@/uni_modules/wot-ui/components/wd-progress/types'

const colorObject: ProgressColor[] = [
  {
    color: 'yellow',
    percentage: 30
  },
  {
    color: 'red',
    percentage: 60
  },
  {
    color: 'blue',
    percentage: 80
  },
  {
    color: 'black',
    percentage: 90
  }
]

特殊样式

动态控制

通过修改 percentage 绑定值，可以实现动态进度控制。

<wd-progress :percentage="percentage" />
<wd-button type="danger" size="small" @click="reduce">-10</wd-button>
<wd-button type="success" size="small" @click="add">+10</wd-button>

const percentage = ref(50)

function add() {
  percentage.value = Math.min(percentage.value + 10, 100)
}

function reduce() {
  percentage.value = Math.max(percentage.value - 10, 0)
}

Attributes

参数	说明	类型	默认值
percentage	进度数值，最大值为 100	number	0
hide-text	是否隐藏进度文字	boolean	false
color	进度条颜色，可选值为 string、string[]、ProgressColor[]	string | string[] | ProgressColor[]	-
status	进度条状态，可选值为 success、danger、warning	string	-
duration	进度增加 1% 所需毫秒数	number	30
percent-position	百分比显示位置配置，type 可选 inner、outer，align 可选 left、center、right	PercentPosition	{ align: 'right', type: 'outer' }
custom-class	根节点自定义类名	string	''
custom-style	根节点自定义样式	string	''

ProgressColor

参数	说明	类型	默认值
color	颜色值	string	-
percentage	颜色生效的进度阈值	number	-

PercentPosition

参数	说明	类型	默认值
type	百分比显示位置，可选值为 inner、outer	string	'outer'
align	百分比文本对齐方式，可选值为 left、center、right	string	'right'

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-progress-bg	$filled-content	进度条底色
--wot-progress-danger-color	$danger-main	danger 进度色
--wot-progress-success-color	$success-main	success 进度色
--wot-progress-warning-color	$warning-main	warning 进度色
--wot-progress-color	$primary-6	默认进度色
--wot-progress-bar-height	$n-8	外部文案模式进度条高度
--wot-progress-height	$n-18	内部文案模式组件高度
--wot-progress-label-color	$text-main	外部文案颜色
--wot-progress-label-width	$n-34	外部文案宽度
--wot-progress-label-margin-left	$spacing-tight	外部文案左侧间距
--wot-progress-inner-label-color	$text-white	内部文案颜色
--wot-progress-inner-zero-bg	$primary-2	内部 zero 态背景色
--wot-progress-inner-zero-color	$text-secondary	内部 zero 态文字颜色
--wot-progress-inner-padding	$padding-zero $padding-tight	内部文案内边距
--wot-progress-label-font-size	$typography-label-size-large	文案字号
--wot-progress-label-line-height	$typography-label-line--height-size-large	文案行高
--wot-progress-icon-size	$n-18	图标字号
--wot-progress-radius	$radius-radius-full	进度条圆角

源代码

文档

• 组件