Progress 进度条

展示一个操作进度，告知用户当前数据的处理状态.

基础用法

可以使用width来指定进度条的宽度，默认为200px,该属性支持三种传入形式。进度条组件必须接收一个percentage属性表示当前进度，percentage属性必须为Number类型，在0到100之间，且该属性支持响应式。

可以使用status指定进度条状态，可选值为primary、success、warning、danger，默认为primary。且非primary状态下进度条的文字提示将变为一个图标。如果需要指定进度条颜色，建议使用color属性指定，本属性只是为了提供一些基础可选方案。

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="200px"></ym-progress>
        <ym-progress :percentage="percentage" width="300px" status="success"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" status="warning"></ym-progress>
        <ym-progress :percentage="percentage" width="500px" status="danger"></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

let timer:any = null
onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px
}
</style>

文字显示

可以使用showText属性来控制文字是否显示，默认为true。可以使用format属性来制定一个文字显示的格式函数，进度条将显示文字format(percentage)的返回值。

TIP

注意： format属性只在showText为true时生效。

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="400px"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" :format="format"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" :showText="false"></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

const format = (percentage:number) => {
    if(percentage > 90) return "完成"
    if(percentage > 50) return "进行中"
    return `${percentage}%`
}
let timer:any = null
onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px
}
</style>

进度行内展示

进度条的文字可以设置在进度条外部，通过设置textInside属性可以控制文字显示的位置。该属性接受一个boolean值，默认为false。如果需要下开启文字内部显示，需要保证进度条高度足够大，可以使用strokeWidth属性指定进度条的高度，该属性接受一个number值，默认为6。

TIP

注意：需要保证strokeWidth大于20,否则文字将在进度条外部显示。同时需要保证showText为true。

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="400px" :textInside="true"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" :showText="false" :textInside="true" :strokeWidth="20"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" :textInside="true" :strokeWidth="20" status="warning"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" :textInside="true" :strokeWidth="20" status="success"></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

const format = (percentage:number) => {
    if(percentage > 90) return "完成"
    if(percentage > 50) return "进行中"
    return `${percentage}%`
}
let timer:any = null
onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px
}
</style>

自定义颜色

进度条的颜色可以通过color属性来设置，该属性接受一个string值，默认为#409eff。且该属性的优先级高于status属性。

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="300px" color="#6f7ad3"></ym-progress>
        <ym-progress :percentage="percentage" width="300px" color="#e6a23c"></ym-progress>
        <ym-progress :percentage="percentage" width="300px" color="#5cb87a"></ym-progress>
        <ym-progress :percentage="percentage" width="300px" color="#1989fa"></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

let timer:any = null


onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px
}
</style>

条纹进度条

可以使用striped属性来设置进度条为条纹样式，该属性接受一个boolean值，默认为false。可以使用stripedFlow属性来设置条纹是否运动，该属性接受一个boolean值，默认为false。可以使用duration属性来设置条纹运动的时长，该属性接受一个number值，默认为6。

100%

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="400px"  striped :strokeWidth="20"></ym-progress>
        <ym-progress :percentage="percentage" width="400px" status="success" strokeWidth="20" striped  stripedFlow ></ym-progress>
        <ym-progress :percentage="percentage" width="400px" status="warning" strokeWidth="20" striped  stripedFlow ></ym-progress>
        <ym-progress :percentage="percentage" width="400px" status="danger"  strokeWidth="20" striped  stripedFlow ></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const percentage = ref(100)

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px
}
</style>

环形进度条

可以使用type属性来指定进度条的类型，可选值为line或者circle，设置为circle即为环形进度条，默认为line。环形进度条必须使用width属性来指定宽度。同时对于环形进度条来说textInside,strokeWidth,striped，stripedFlow等属性将无效。环形进度条同样可以使用color属性来指定颜色，该属性的优先级高于status属性。

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="150px" type="circle"></ym-progress>
        <ym-progress :percentage="percentage" width="150px" status="success" type="circle"></ym-progress>
        <ym-progress :percentage="percentage" width="150px" status="warning" type="circle"></ym-progress>
        <ym-progress :percentage="percentage" width="150px" status="danger" type="circle"></ym-progress>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

let timer:any = null
onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
</style>

自定义内容

可以通过具名插槽default来设置环形进度条的内容，该插槽的默认值为percentage。同时插槽的优先级高于percentage属性，且插槽会传入一个percentage参数表示当前进度。

0 %

<template>
    <div class="container">
        <ym-progress :percentage="percentage" width="300px" >
            <template #default="{ percentage }">
                <span>{{ percentage }}</span>
            </template>
        </ym-progress>
        <ym-progress :percentage="percentage" width="300px" status="success" :stroke-width="20" :text-inside="true">
            <template #default="{ percentage }">
                <span>{{ percentage }} %</span>
            </template>

        </ym-progress>
        <p class="list">
            <ym-progress :percentage="percentage" width="150px" type="circle">
                <template #default="{ percentage }">
                    <div class="value">{{ percentage }} %</div>
                    <span class="label">进度内容</span>
                </template>
            </ym-progress>
            <ym-progress :percentage="percentage" width="150px" color="blue" type="circle">
                <template #default="{ percentage }">
                    <ym-icon icon="house" color="blue"></ym-icon>
                </template>
            </ym-progress>
        </p>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const percentage = ref(0)

let timer:any = null
onMounted(() => {
        timer = setInterval(() => {
            percentage.value += 10
            if (percentage.value > 100) {
                percentage.value = 0
            }
        },2000)
})

onUnmounted(() => {
    timer && clearInterval(timer)
})

</script>

<style scoped>
.container {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.list {
    display: flex;
    gap: 20px;
}
.value {
    font-size: 24px;
}
.label {
    font-size: 12px;
    color: #666;
}
</style>

Progress API

Props

Name	Description	Type	Default
percentage	进度值	`number`	- (必填)
width	进度条宽度（包含文字宽度）	`'string' \| 'number'`	200
color	j进度条颜色	`string`	-
status	进度条状态	`enum` - `'primary'\| 'success'\| 'warning'\| 'danger'`	primary
showText	是否显示文字	`boolean`	true
textInside	文字是否显示在内部（只在strokeWidth > 20 时生效）	`boolean`	false
strokeWidth	进度条高度	`number`	6
format	自定义显示文字	`(percentage: number) => string`	-
striped	是否显示条纹	`boolean`	false
stripedFlow	条纹是否运动	`boolean`	false
duration	条纹运动时长	`number`	6
type	进度条类型	`enum` - `'line'\| 'circle'`	line

Slots

Name	Description
default	自定义内容

Progress 进度条 ​

基础用法 ​

文字显示 ​

进度行内展示 ​

自定义颜色 ​

条纹进度条 ​

环形进度条 ​

自定义内容 ​

Progress API ​

Props ​

Slots ​