Progress

简易介绍

progress进度条组件，用于展示任务或操作的进度状态。
可以使用<MYProgress></MYProgress>来实现一个进度条。

基础用法

使用percentage属性设置进度百分比。

代码演示

50%

<template>
    <MYProgress :percentage='50' />
</template>

展开代码

不同状态

使用status属性可以设置进度条的状态。

代码演示

70%

50%

30%

50%

<template>
    <div style='display: flex; flex-direction: column; gap: 20px;'>
        <MYProgress :percentage='70' status='success' />
        <MYProgress :percentage='50' status='warning' />
        <MYProgress :percentage='30' status='exception' />
    </div>
</template>

展开代码

API 参考

Props

参数	说明	类型	可选值	默认值
percentage	进度百分比	number	0-100之间的值	0
status	进度条状态	string	success/warning/exception	''
format	格式化函数	function	—	—

类型定义

interface ProgressProps {
  percentage?: number;
  status?: 'success' | 'warning' | 'exception' | '';
  color?: string;
  format?: (percentage: number) => string;
  size?: 'small' | 'medium' | 'large';
}