Fusions

Appearance

Progress 进度条 ​

iPhone

此组件展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 mode 属性设置进度条的类型（默认 line），可选值为 line 和 circle。
  • 通过 percent 属性设置当前的进度值，此值区间为 0-100。
  • 通过 activeColor 属性设置进度条的颜色。
html
<!-- 线性 Progress -->
<fu-progress :percent="50"></fu-progress>

<!-- 圆形 Progress -->
<fu-progress :percent="25" mode="circle"></fu-progress>

设置不显示百分比 ​

通过 showPercent 属性设置是否显示进度条内百分值

html
<fu-progress :percent="50" :showPercent="false"></fu-progress>

自定义高度及大小 ​

  • 通过 height 属性设置进度条的高度（仅 mode="line" 时有效）
  • 通过 size 属性设置进度条的大小（仅 mode="circle" 时有效）
html
<!-- 线性 Progress -->
<fu-progress :percent="50" height="20"></fu-progress>

<!-- 圆形 Progress -->
<fu-progress :percent="50" size="200"></fu-progress>

自定义样式（不支持安卓环境的nvue） ​

数值自定义样式，需要将数值嵌套在默认插槽内

html
<fu-progress :percent="percentage1">
    <text class="fu-percent-slot">{{ `${percentage1}%` }}</text>
</fu-progress>

<style lang="scss" scoped>
    .fu-percent-slot {
        padding: 1px 5px;
        background-color: #01BEFF;
        color: #ffffff;
        border-radius: 100px;
        font-size: 10px;
        margin-right: -5px;
    }
</style>

API ​

Progress Props ​

属性名说明类型默认值可选值
mode进度条类型Stringlinecircle
activeColor进度条激活部分的颜色String#2979ff-
inactiveColor进度条的底色String#f0f0f0-
percent进度百分比，数值String｜Number0-
showPercent是否在进度内部显示百分比的值Booleantruefalse
height进度条的高度（仅 mode="line" 时有效）Number12-
size进度条的大小（仅 mode="circle" 时有效）Number200-
borderWidth进度条圆环宽度（仅 mode="circle" 时有效）String｜Number14-
duration圆环执行动画的时间，单位 ms（仅mode = circle有效）Number1500-

Progress Slot ​

名称说明
default传入自定义显示的内容，将会覆盖默认显示的百分比值