progress

概述

用于展示进度条。

使用限制

子组件

不支持

属性

除了支持 通用属性 以外，还支持如下属性。

样式

支持active伪类。

除了支持 通用样式 以外，还支持如下样式。

设置progress宽度时，直接设置width无效，建议外包一个父组件div，对div设置width。

事件

支持 通用事件 ，不支持swipe事件。

示例代码

<template>
    <div class="container">
        <div class="page-title-wrap">
            <text class="page-title">{{componentName}}</text>
        </div>
        <div class="item-container">
            <div class="item-content">
                <text class="item-title">10%（Default: color #33b4ff, height32px）</text>
                <progress class="progress" percent="10" style="layer-color:#09ba07;"></progress>
            </div>
            <div class="item-content">
                <text class="item-title">20%</text>
                <progress class="progress" style="color:#09ba07;stroke-width:10px;" percent="20"></progress>
            </div>
            <div class="item-content">
                <text class="item-title">40%</text>
                <progress class="progress" style="color:#0faeff;stroke-width:10px;" percent="40"></progress>
            </div>
            <div class="item-content">
                <text class="item-title">60%</text>
                <progress class="progress" style="color:#A020F0;stroke-width:10px;" percent="60"></progress>
            </div>
            <div class="item-content">
                <text class="item-title">80%</text>
                <progress class="progress" style="color:#f76160;stroke-width:10px;" percent="80"></progress>
            </div>
            <div class="item-content-circular">
                <text class="item-title">Default: width height 32px</text>
                <progress class="circular circular_0" style="color:#09ba07" type="circular"></progress>
            </div>
            <div class="item-content-circular">
                <text class="item-title">height 40px</text>
                <progress class="circular circular-1" style="color:#09ba07" type="circular"></progress>
            </div>
            <div class="item-content-circular">
                <text class="item-title">height 60px</text>
                <progress class="circular circular-2" style="color:#0faeff" type="circular"></progress>
            </div>
            <div class="item-content-circular">
                <text class="item-title">height 80px</text>
                <progress class="circular circular-3" style="color:#A020F0" type="circular"></progress>
            </div>
            <div class="item-content-circular">
                <text class="item-title">height 100px</text>
                <progress class="circular circular-4" style="color:#f76160" type="circular"></progress>
            </div>
        </div>
    </div>
</template>
<style>
    @import '../../../Common/css/common.css';
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .item-content {
        margin-bottom: 60px;
        flex-direction: column;
    }
    .item-content-circular {
        margin-bottom: 60px;
        flex-direction: column;
        align-items: center;
    }
    .progress {
        flex: 1;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .item-title {
        text-align: center;
    }
    .circular-1 {
        width: 40px;
        height: 40px;
    }
    .circular-2 {
        width: 60px;
        height: 60px;
    }
    .circular-3 {
        width: 80px;
        height: 80px;
    }
    .circular-4 {
        width: 100px;
        height: 100px;
    }
</style>
<script>
    export default {
      data: {
        componentName: 'progress'
      },
      onInit() {
        this.$page.setTitleBar({text: 'progress'})
      }
    }
</script>

效果图如下：

版本更新说明

相关链接

[h2]案例

progress组件设置width宽度不生效