Ant-Design源码分析——Progress（一）

最新推荐文章于 2025-03-21 17:37:49 发布

Nine-Theta

最新推荐文章于 2025-03-21 17:37:49 发布

阅读量2.5k

点赞数

文章标签： react.js 前端 reactjs

本文链接：https://blog.youkuaiyun.com/qq_46025739/article/details/121353215

版权

本文详细介绍了Ant Design库中的Progress组件，包括其三种类型(line, circle, dashboard)的使用，状态控制，配置参数，如百分比显示、样式定制等。适合前端开发者了解如何创建动态进度条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2021SC@SDUSC

progress一共有3种类型，分别为“line”、“circle”、“dashboard”

line

circle

dashboard

本组件内容较多，本文章先只介绍“progress”整体部分

progress部分

首先是导入相应的模块

import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import { validProgress, getSuccessPercent } from './utils';

定义的一些变量，分析已写在注释里

// 首先定义了progress的三种类型，并标记了其对应的名字，分别对应0，1，2
const ProgressTypes = tuple('line', 'circle', 'dashboard');
export type ProgressType = typeof ProgressTypes[number];
// 定义了进度条的状态分别为“普通状态”、“