Skip to content
On this page

Progress 进度条

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

基本用法

设置百分比 percentage

html
<wd-progress :percentage="30" />

隐藏进度文字

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

html
<wd-progress :percentage="60" hide-text>

设置状态

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

html
<wd-progress :percentage="100" hide-text status="success" />
<wd-progress :percentage="70" hide-text status="danger" />

修改颜色

设置 color 修改进度条颜色。

html
<wd-progress :percentage="80" color="#00c740">

color 也可以设置为数组或者函数。数组如果只传入颜色,则自动计算每个颜色的进度边界。函数需要返回一个颜色值。

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

数组也可以设置为以下格式:

html
<wd-progress :percentage="percentage" :color="colorObject"/>
typescript
const colorObject = ref<any>([
  {
    color: 'yellow',
    percentage: 30
  },
  {
    color: 'red',
    percentage: 60
  },
  {
    color: 'blue',
    percentage: 80
  },
  {
    color: 'black',
    percentage: 90
  }
])
const percentage = ref<number>(100)

Attributes

参数说明类型可选值默认值最低版本
percentage进度数值,最大值100number-0-
hide-text隐藏进度文字boolean-false-
color进度条颜色string / array-linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%)-
status进度条状态stringsuccess / danger--
duration进度增加1%所需毫秒数number-30-

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.