Progress 进度条

用于展示操作进度, 告知用户当前状态和预期。

直线进度条

Progress 组件设置 percentage 属性即可, 表示进度条对应的百分比。该属性必填, 并且必须在 0-100 的范围内。你可以设置 format 来自定义文字显示的格式。

<template>
  <div class="max-w-600">
    <px-progress :percentage="50" class="mb-15" />
    <px-progress :percentage="100" :format="format" class="mb-15" />
    <px-progress :percentage="100" status="success" class="mb-15" />
    <px-progress :percentage="100" status="warning" class="mb-15" />
    <px-progress :percentage="50" status="danger" class="mb-15" />
  </div>
</template>

<script lang="ts" setup>
const format = (percentage: number) =>
  percentage === 100 ? 'Full' : `${percentage}%`
</script>

进度条内显示百分比标识

百分比不占用额外控件， 适用于文件上传等场景

Progress 组件可通过 stroke-width 属性更改进度条的高度, 并可通过 text-inside 属性来改变进度条内部的文字。

<template>
  <div class="max-w-600">
    <px-progress
      :percentage="70"
      :text-inside="true"
      :stroke-width="24"
      class="mb-15"
    />
    <px-progress
      :percentage="100"
      status="success"
      :text-inside="true"
      :stroke-width="24"
      class="mb-15"
    />
    <px-progress
      :percentage="80"
      status="warning"
      :text-inside="true"
      :stroke-width="24"
      class="mb-15"
    />
    <px-progress
      :percentage="50"
      status="danger"
      :text-inside="true"
      :stroke-width="24"
      class="mb-15"
    />
  </div>
</template>

自定义进度条颜色

可以通过 color 属性来设置进度条颜色。该属性当前仅支持十六进制颜色值

<template>
  <div class="max-w-600">
    <px-progress :percentage="percentage" color="#6f9bc6" class="mb-15" />
    <px-progress :percentage="percentage" color="#a172d0" class="mb-15" />
    <px-progress :percentage="percentage" color="#d80835" class="mb-15" />
    <px-progress :percentage="percentage" color="#eda01f" class="mb-15" />
    <div>
      <px-button-group>
        <px-button icon="minus-solid" @click="decrease" />
        <px-button icon="plus-solid" @click="increase" />
      </px-button-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const percentage = ref(20)

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
</script>

自定义内容

通过默认插槽添加自定义内容

<template>
  <div class="max-w-600">
    <px-progress :percentage="50" :stroke-width="24" class="mb-15">
      <px-button size="small">Content</px-button>
    </px-progress>
    <px-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="50"
      status="success"
      class="mb-15"
    >
      <span>Content</span>
    </px-progress>
    <px-progress
      :text-inside="true"
      :stroke-width="24"
      :percentage="50"
      status="danger"
      class="mb-15"
    >
      <template #default="{ percentage }">
        {{ percentage + '°' }}
      </template>
    </px-progress>
  </div>
</template>

动画进度条

使用 indeterminate 属性来设置不确定的进度, duration 来控制动画持续时间。

<template>
  <div class="max-w-600">
    <px-progress :percentage="50" indeterminate :duration="1" class="mb-15" />
    <px-progress
      :percentage="100"
      :format="format"
      indeterminate
      class="mb-15"
    />
    <px-progress
      :percentage="100"
      status="success"
      indeterminate
      class="mb-15"
    />
    <px-progress
      :percentage="100"
      status="warning"
      indeterminate
      class="mb-15"
    />
    <px-progress
      :percentage="50"
      status="danger"
      indeterminate
      :duration="6"
      class="mb-15"
    />
  </div>
</template>

<script lang="ts" setup>
const format = (percentage: number) =>
  percentage === 100 ? 'Full' : `${percentage}%`
</script>

条纹进度条

通过设置 striped 属性来获取条纹进度条, 也可以使用 striped-flow 属性获取条纹进度条流动效果, 使用 duration 属性控制流速

<template>
  <div class="max-w-600">
    <px-progress class="mb-15" :percentage="50" :stroke-width="24" striped />
    <px-progress
      class="mb-15"
      :percentage="50"
      :stroke-width="24"
      striped
      color="#626aef"
    />
    <px-progress
      class="mb-15"
      :percentage="75"
      :stroke-width="24"
      striped
      striped-flow
      :duration="1"
      status="success"
    />
    <px-progress
      class="mb-15"
      :percentage="100"
      :stroke-width="24"
      striped
      striped-flow
      status="warning"
    />
    <px-progress
      class="mb-15"
      :percentage="30"
      :stroke-width="24"
      striped
      striped-flow
      :duration="6"
      status="danger"
    />
  </div>
</template>

棋盘进度条

通过设置 checker 属性来获取棋盘进度条

<template>
  <div class="max-w-600">
    <px-progress :percentage="50" checker :stroke-width="28" class="mb-15" />
    <px-progress
      :percentage="100"
      status="success"
      checker
      :stroke-width="28"
      class="mb-15"
    />
    <px-progress
      :percentage="100"
      status="warning"
      checker
      :stroke-width="28"
      class="mb-15"
    />
    <px-progress
      :percentage="50"
      status="danger"
      checker
      :stroke-width="28"
      class="mb-15"
    />
  </div>
</template>

Progress API

Props

Name	Description	Type	Default
percentage	进度条百分比	number	0
status	进度条类型	enum - primary | success | warning | danger	primary
stroke-width	进度条宽度	number	16
text-inside	文字显示内置在进度条内	boolean	false
indeterminate	是否为动画进度条	boolean	false
duration	动画/流动速度	number	4
color	自定义颜色	string	-
show-text	是否显示进度条文字	boolean	true
striped	是否为条纹进度条	boolean	false
striped-flow	是否为条纹进度条流动	boolean	false
checker	是否为棋盘进度条	boolean	false
format	进度条文字显示格式	function	-

Slots

Name	Description
default	默认插槽，用于设置 Progress 的内容描述