进度展示组件

用于展示任务的进度。

基础用法

通过标签 NueProgress 使用进度展示组件。

通过属性 percentage 设置显示的进度百分比，接受 number 类型的值，范围为 0-100。

通过属性 type 设置进度展示的类型，可选值为 line* 和 circle。

<template>
    <nue-div :divider="{}" align="center">
        <nue-progress :percentage="64" />
        <nue-progress :percentage="64" type="circle" />
    </nue-div>
</template>

自定义颜色

通过属性 color 设置进度条的颜色，接受 string 以及 string[] 类型的值，默认值为 #7777ff 。

string[] 类型的值会作为渐变色进行展示。

TIP

类型 string[] 的值仅支持类型为 line 类型的进度条，当类型为 circle 类型的进度条接收到类型 string[] 的值时，会默认取第一个值作为颜色。

<template>
    <nue-div :divider="{}" align="center">
        <nue-progress :percentage="32" color="red" />
        <nue-progress :percentage="48" color="red" type="circle" />
    </nue-div>
    <br />
    <nue-div :divider="{}" align="center">
        <nue-progress :color="['#666', '#aaa', '#ccc']" :percentage="96" />
        <nue-progress
            :color="['#666', '#aaa', '#ccc']"
            :percentage="72"
            type="circle"
        />
    </nue-div>
</template>

设置进度条粗细

通过属性 stroke-width 设置进度条的粗细，接受 number 类型的值，默认值为 6 。

<template>
    <nue-div align="center" :divider="{}">
        <nue-progress :percentage="50" :stroke-width="20"></nue-progress>
        <nue-progress
            :percentage="75"
            :stroke-width="3"
            type="circle"
        ></nue-progress>
    </nue-div>
</template>

设置缩放比例

通过属性 scale 设置进度条缩放比例，接受 number 类型的值，默认值为 1 。

<template>
    <nue-div align="center" :divider="{}">
        <nue-progress
            :percentage="50"
            :stroke-width="12"
            :scale="0.8"
        ></nue-progress>
        <nue-progress
            :percentage="75"
            :stroke-width="5"
            :scale="1.4"
            type="circle"
        ></nue-progress>
    </nue-div>
</template>

将进度文字显示到内部

通过属性 showInnerText 设置进度文字是否显示到进度条内部，接受 boolean 类型的值，默认值为 false 。

TIP

属性 showInnerText 目前仅支持类型为 line 类型的进度条。

<template>
    <nue-div align="center" :divider="{}">
        <nue-progress
            :percentage="64"
            :stroke-width="20"
            show-inner-text
        ></nue-progress>
    </nue-div>
</template>

隐藏百分比文字

通过属性 hideText 设置百分比文字的隐藏和显示，接受 boolean 类型的值，默认值为 false 。

<template>
    <nue-progress :percentage="100" hide-text></nue-progress>
</template>