进度条

线形进度条

默认在线形外展示进度和状态

默认样式

30%

100%

100%

进度完成

进度状态发生重大错误

进度被中断

渐变色

60%

可以在线形内展示进度信息

默认样式

30%

进度0-10%时数字数字位置出现在目前进度的右边区域

5%

<template>
    <div>
        <h3>
            默认在线形外展示进度和状态
        </h3>
        <div>
            <div class="demo-process-row">默认样式</div>
            <t-progress theme="line" :percentage="30" />

            <div class="demo-process-row">100%</div>
            <t-progress theme="line" :percentage="100" />

            <div class="demo-process-row">进度完成</div>
            <t-progress theme="line" :status="'success'" :percentage="60" />

            <div class="demo-process-row">进度状态发生重大错误</div>
            <t-progress theme="line" :status="'error'" :percentage="60" />

            <div class="demo-process-row">进度被中断</div>
            <t-progress theme="line" :status="'warning'" :percentage="60" />

            <div class="demo-process-row">渐变色</div>
            <t-progress theme="line" :color="{ from: '#0052D9', to: '#00A870' }" :percentage="60" :status="'active'" />
        </div>
        <h3>
            可以在线形内展示进度信息
        </h3>
        <div>
            <div class="demo-process-row">默认样式</div>
            <t-progress theme="plump" :percentage="30" />

            <div class="demo-process-row">进度0-10%时数字数字位置出现在目前进度的右边区域</div>
            <t-progress theme="plump" :percentage="5" />
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
};
</script>
<style scoped>
h3 {
  margin: 24px 0;
}
.demo-process-inner:first-child {
  margin-top: 0
}

.demo-process-inner {
  margin: 16px 0 4px
}
</style>

显示代码 复制代码 复制代码

环形进度条

默认样式

30%

不显示数字

自定义内容

75day

进度完成

进度状态发生重大错误

进度被中断

默认不同尺寸

小尺寸

30%

默认尺寸

30%

大尺寸

75%

<template>
    <div>
        <!-- 重要：strokeWidth 大小不能超过 size 的一半，否则无法渲染出环形 -->
        <div class="demo-process-row">
            <div class="demo-process-inner">
                <div class="demo-process-margin">默认样式</div>
                <t-progress theme="circle" :percentage="30" ></t-progress>
            </div>
            <div class="demo-process-inner">
                <div class="demo-process-margin">不显示数字</div>
                <t-progress theme="circle" :label="false" :percentage="100" :status="'success'"></t-progress>
            </div>
            <div class="demo-process-inner">
                <div class="demo-process-margin">自定义内容</div>
                <t-progress theme="circle" :label="'75day'" :percentage="50" :status="'success'"></t-progress>
            </div>
        </div>
        <div class="demo-process-row">
            <div class="demo-process-inner">
                <div class="demo-process-margin">进度完成</div>
                <t-progress theme="circle" :percentage="100" :status="'success'"></t-progress>
            </div>
            <div class="demo-process-inner">
                <div class="demo-process-margin">进度状态发生重大错误</div>
                <t-progress theme="circle" :percentage="75" :status="'error'"></t-progress>
            </div>
            <div class="demo-process-inner">
                <div class="demo-process-margin">进度被中断</div>
                <t-progress theme="circle" :percentage="50" :status="'warning'"></t-progress>
            </div>
        </div>
        <div>默认不同尺寸</div>
        <div class="demo-process-row">
            <div class="demo-process-inner">
                <div class="demo-process-margin">小尺寸</div>
                <t-progress theme="circle" :percentage="30" :size="'small'"></t-progress>
            </div>
            <div class="demo-process-inner">
                <div class="demo-process-margin">默认尺寸</div>
                <t-progress theme="circle" :percentage="30" :size="'medium'"></t-progress>
            </div>
            <div class="demo-process-inner" style="margin-left: 60px;">
                <div class="demo-process-margin">大尺寸</div>
                <!-- <t-progress theme="circle" :percentage="75" :size="'large'"></t-progress> -->
                <t-progress theme="circle" :percentage="75" :size="'160'"></t-progress>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.demo-process-margin{
  margin-bottom: 10px;
  text-align: center;
}
.demo-process-row{
    margin: 20px 0 10px;
    display: flex;

  .demo-process-inner{
    margin: 15px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>

显示代码 复制代码 复制代码