Progress进度条

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-progress": "/miniprogram_npm/vtuweapp/progress/vtu-progress"
    3. }
    4.

    代码演示

    基础用法

    Progress 组件设置value属性即可，表示进度条对应的百分比，必填，必须在 0-100。通过插槽指定进度条文字内容。

    1. <vtu-progress value="{{number1}}" show-text="{{false}}"></vtu-progress>
    2. <vtu-progress value="{{number2}}" color="orange" text-inside="{{true}}" round></vtu-progress>
    3. <vtu-progress value="{{number3}}" circle font-color="red"></vtu-progress>
    4.

    尺寸大小

    1. <vtu-progress value="{{number4}}" stroke-width="20px"></vtu-progress>
    2. <vtu-progress value="{{number5}}" stroke-width="15px" color="#6f7ad3" round></vtu-progress>
    3. <vtu-progress value="{{number6}}" color="{{number6 > 50 ? 'red': null}}" stroke-width="10px" circle></vtu-progress>
    4.

    状态

    1. <vtu-progress value="{{number5}}" status="success" stripe></vtu-progress>
    2. <vtu-progress value="{{number2}}" status="error" round stripe></vtu-progress>
    3. <vtu-progress value="{{number4}}" status="warning" stroke-width="10px" circle stripe></vtu-progress>
    4. <vtu-progress value="{{number4}}" stroke-width="10px" circle stripe user-slot>
    5.     <span slot="label">待完成</span>
    6. </vtu-progress>
    7.

    环状进度条

    Progress 组件可通过type属性来指定使用环形进度条，在环形进度条中，还可以通过circle-diam属性来设置其大小。

    <vtu-progress type="circle" status="success" value="{{number2}}"></vtu-progress>
<vtu-progress type="circle" circle-diam="80" value="{{number4}}" color="orange" user-slot>
    <span slot="label">待完成</span>
</vtu-progress>
<vtu-progress type="circle" color="blue" circle-diam="60" circle-bg-color="red" circle-border-size="4" value="{{number3}}" label-class="circleLabel"></vtu-progress>

    组件参数

    Props

    参数说明类型默认值必填
    value百分比Number0否
    type类型，line/circleStringline否
    strokeWidth进度条的宽度String15px否
    text-inside进度条显示文字内置在进度条内（只在 type=line 时可用）String-否
    status进度条当前状态，primary/success/error/warningString-否
    color进度条背景色（会覆盖 status 状态颜色）String-否
    show-text是否显示进度条文字内容Booleantrue否
    stripe是否背景为条纹（只在 type=line 时可用）Booleanfalse否
    circle-bg-color圆环进度条底层背景色String#ddd否
    circle-center-color圆环进度条中心区域颜色Stringtransparent否
    circle-diam圆环直径，单位pxNumber100否
    circle-border-size圆环进度条宽度，单位pxNumber5否
    user-slot是否使用插槽Booleanfalse否
    circle进度条圆形（只在 type=line 时可用）Booleanfalse否
    round进度条圆角（只在 type=line 时可用）Booleanfalse否
    font-color进度条文字颜色String-否

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Progress 进度条 - 图1