fast-dataview-ui

Appearance

Return to top
On this page

Progress 进度条

用于表示任务的完成进度。

基础用法

percent属性表示进度条的百分比，接受number类型，范围是0-100

50%
70%
100%
<template>
  <FProgress :percent="0"></FProgress>
  <FProgress :percent="50" style="margin-top: 10px;"></FProgress>
  <FProgress :percent="70" style="margin-top: 10px;"></FProgress>
  <FProgress :percent="100" style="margin-top: 10px;"></FProgress>
</template>

自定义颜色

color属性用于设置颜色，接受string[]类型，默认值是['#d1d5db', '#3b82f6', 'white']，分别是进度条的背景颜色，进度条本体颜色，进度条内文本颜色

50%
50%
50%
<template>
  <FProgress :percent="50"></FProgress>
  <FProgress :percent="50" :color="['#8338ec','#a2d2ff','#023047']" style="margin-top: 10px;"></FProgress>
  <FProgress :percent="50" :color="['#06d6a0','#ffd166','#073b4c']" style="margin-top: 10px;"></FProgress>
</template>

参数

参数名说明类型可选值默认值
percent进度条的百分比number-0
color进度条的颜色string[]-['#d1d5db', '#3b82f6', 'white']
duration百分比变化时的动画时长(秒)number-0.5