Skip to content

ProgressBar-DEMO ​


vue
<fv-ProgressBar>
</fv-ProgressBar>

Default ProgressBar ​


vue
<fv-ProgressBar v-model="percent[0]">
</fv-ProgressBar>

Indeterminate ProgressBar ​


vue
<fv-ProgressBar loading="true">
</fv-ProgressBar>

ProgressBar Disabled ​


  1. Default
vue
<fv-ProgressBar v-model="percent[1]" disabled>
</fv-ProgressBar>
  1. Indeterminate
vue
<fv-ProgressBar loading="true" disabled>
</fv-ProgressBar>

ProgressBar Custom Style ​


  1. Custom Foreground
vue
<fv-ProgressBar v-model="percent[2]" foreground="rgba(0,204,153,1)">
</fv-ProgressBar>
  1. Custom Background
vue
<fv-ProgressBar v-model="percent[3]" background="rgba(0,204,153,0.6)">
</fv-ProgressBar>

属性 ​


属性类型必填默认值说明
modelValuenumber否0Progressbar value
loadingboolean否falseIs progressbar indeterminate
foregroundstring否''
backgroundstring否''
borderRadiusnumber否2
disabledboolean否false
themestring否'global'参见组件的 theme 选项。
langstring否"global"参见组件的 lang 选项。

事件 ​


事件名参数说明
progress-changepercent
progress-finishedpercent

MIT Licensed