Progress 进度条

展示操作或任务的当前进度，比如上传文件。

基本用法

  1. <nut-progress 
  2.     percentage="30"
  3. >
  4. </nut-progress>

设置高度和颜色

  1. <nut-progress
  2.     percentage="30"
  3.     stroke-color="pink" 
  4.     stroke-width="20"
  5. >
  6. </nut-progress>

设置百分比不显示

  1. <nut-progress 
  2.     percentage="50"
  3.     :show-text="false"
  4. >
  5. </nut-progress>

设置百分比外显

  1. <nut-progress 
  2.     percentage="60" 
  3.     :text-inside="false" 
  4.     stroke-height="24"
  5. ></nut-progress>

设置百分比内显

  1. <nut-progress 
  2.     percentage="60" 
  3.     :text-inside="true" 
  4.     stroke-width="24"
  5. ></nut-progress>

自定义尺寸

内置 small，base，large 三种规格供使用。

  1. <nut-progress 
  2.     size="small"
  3.     percentage="30" 
  4.     text-inside="true" 
  5. >
  6. </nut-progress>
  7. <nut-progress
  8.     size="base"
  9.     percentage="50" 
  10.     text-inside="true" 
  11. >
  12. </nut-progress>
  13. <nut-progress 
  14.     size="large"
  15.     percentage="70" 
  16.     text-inside="true" 
  17. >
  18. </nut-progress>

设置状态显示

  1. <nut-progress 
  2.     percentage="30" 
  3.     stroke-color="#1890ff" 
  4.     status="active"
  5. >
  6. </nut-progress>
  7. <nut-progress 
  8.     percentage="50"
  9.     stroke-color="#f30"
  10.     stroke-width="15"
  11.     status="wrong"
  12. >
  13. </nut-progress>
  14. <nut-progress 
  15.     percentage="100" 
  16.     stroke-color="#1890ff" 
  17.     :stroke-width="15" 
  18.     status="success"
  19. >
  20. </nut-progress>

Prop

字段说明类型默认值
percentage百分比Number0
stroke-color进度条背景色String#f30
stroke-width进度条宽度String‘’
size进度条及文字尺寸，可选值small/base/largeString-
show-text是否显示进度条文字内容Booleantrue
text-inside进度条文字显示位置(false:外显，true:内显)Booleanfalse
text-color进度条文字颜色设置String#333
status进度条当前状态,可选值text/active/wrong/successStringtext

Progress 进度条 - 图1