Progress 进度条

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

直线进度条

Progress 组件设置 percent 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。

<template>
  <div class="progress-container">
    <vk-progress :strokeHeight="15" :percent="30" type="primary"></vk-progress>
    <vk-progress :strokeHeight="18" :percent="40" type="warning"></vk-progress>
    <vk-progress :strokeHeight="22" :percent="50" type="success"></vk-progress>
    <vk-progress :strokeHeight="24" :percent="60" type="danger"></vk-progress>
    <vk-progress :strokeHeight="26" :percent="70" type="info"></vk-progress>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.progress-container .vk-progress-bar{
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

进度条内显示百分比标识

Progress 组件可通过 stroke-height 属性更改进度条的高度，并可通过 show-text 属性来显示百分比标识。

30%

40%

50%

60%

70%

<template>
  <div class="progress-container">
    <vk-progress :strokeHeight="15" :percent="30" type="primary" :show-text="true"></vk-progress>
    <vk-progress :strokeHeight="18" :percent="40" type="warning" :show-text="true"></vk-progress>
    <vk-progress :strokeHeight="22" :percent="50" type="success" :show-text="true"></vk-progress>
    <vk-progress :strokeHeight="24" :percent="60" type="danger" :show-text="true"></vk-progress>
    <vk-progress :strokeHeight="26" :percent="70" type="info" :show-text="true"></vk-progress>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.progress-container .vk-progress-bar{
  margin-bottom: 15px;
  max-width: 600px;
}
</style>

Progress API

Progress Attributes

属性名	说明	类型	默认值
percent	percent	number	0
stroke-height	进度条的高度	number	15
show-text	是否显示进度条文字内容	boolean	true
type	进度条类型	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	info