「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

前言

从今天开始， 我会总结自己在实际项目过程中遇到的技术问题和封装组件的过程，记录并且输出相应的知识文章 ，给大家提供一个思考的方向，然后共同勉励，一起进步。

今天，先总结一个React项目中3种进度条相关样式组件的封装思路，由于现在我使用的技术栈为React，所以技术栈Vue的同学只能参考一下思路，自己变通的去尝试，后续Vue项目中相关的组件会在后面的文章分享。

进度条在实际开发项目中的使用场景还是特别多的，尤其像我们公司有着许多报表的需求，并且里面有着很多百分数的展示场景，而且我们的Boss和UI有着自己的想法，很无奈不能简单的使用Antd提供的Progress组件去渲染效果，故需要自己开发对应的组件去适应需求所需要的进度条效果。

先上图，效果图为表格中使用效果，使用场景非表格也可：

背景进度条

背景进度条，顾名思义就是将进度条的表现效果做成背景，通过改变背景的深浅颜色并加以数字来直观地表示进度。

如何封装？既然是背景，那就需要两个盒子，一个盒子用来作为容器，一个盒子用来表示进度，容器盒子为浅色背景，进度盒子为深色背景，至于数字则使用React提供的特殊属性Children。项目中都会使用简单的TypeScript做类型说明，所以不了解TypeScript的同学需要自己去学习一下或者将TypeScript相关的去掉即可。话不多说，开搞：

创建BgProgress.tsx文件：

import React from 'react';
import './style.less';

interface BgProgressProps extends React.ComponentProps<any> {
    rate: string;               // 百分数
    wrapClassName: string;      // 容器类名
    barClassName: string;       // 进度条类名
}

/** * 背景进度条 * @param props * @constructor */
const BgProgress = (props: BgProgressProps) => {
    const {rate, wrapClassName, barClassName, children} = props;
    return (
        <div className={['bit-cellprogress', wrapClassName].join(' ')}> <div className={['bit-bar', barClassName].join(' ')} style={{width: `${rate}`}} ></div> {children} </div>
    )
}


export default BgProgress;

创建style.less样式文件：

.bit-cellprogress {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    .bit-bar {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
    }
}

至此，背景进度条组件的主要代码就已完成，我们定义了三个必要属性：rate，wrapClassName，barClassName，组件会根据传入的进度百分数，容器类名和进度条类名实现背景进度条效果；容器类名和进度条类名定义为类名而不是直接是色值，是考虑到有可能会根据不同的条件来定义不同的颜色效果，我的工作中就需要根据是通过，驳回还是待定来显示绿色、红色还是灰色，用类名易于扩展；若不想用类名也可以根据不同状态传入不同色值即可。

使用方法：

1）导入文件：
   import BgProgress from "../../../component/BgProgress/BgProgress";

2）使用：
   let wrapClass = status ?  'is-green' : 'is-red';
   let barClass = status ?  'is-green-bar' : 'is-red-bar';
   <BgProgress
       rate={`${percent}%`}
       wrapClassName={wrapClass}
       barClassName={barClass}
   >
       <div>{percent}%</div>
   </BgProgress>
   
3）定义样式
   .is-green {
       color: #B1B1B1;
       background-color: #fafff5;
   }

   .is-green-bar {
       background-color: #e5f6d3;
   }
   
   .is-red {
       color: #B1B1B1;
       background-color: #ffdad7;
   }

   .is-red-bar {
       background-color: #ffb6b6;
   }

效果：

效果就是这样的，背景进度条使用场景主要还是在表格里面，那样比较直观的表示进度；其实上面的代码还可以扩展很多属性，但我的业务只需要三个属性就可以满足，如果你们在实际工作中需要其他样式，可以继续在里面扩展属性去实现需求效果，后续我将会丰富这个背景组件并发布在NPM上。

自定义进度条

自定义进度条需求是由于Antd提供的进度条的数字在右侧显示，而UI期望的是数字在进度条上面并跟随进度一起水平居右显示（花里胡哨），所以已有组件不满足使用场景，也只有重新开发。来看设计稿：

思考：设计图这里数值显示的小数，当进度的宽度不足以放下数值，样式是否会被影响？答案是肯定的，当我指出这个问题，UI也没有想到这个问题，然后我想游说UI使用现有Antd组件时，UI甩出：老板就要这样的。。。我nm。。。行，给我等着！

创建DiyProgress.tsx文件：

import React, {useEffect} from 'react';
import './style.less';

interface DiyProgressProps {
    decimal: number | string; // 小数
    percent: number; // 百分数
    strokeWidth?: number; // 进度条线的宽度
    strokeLinecap?: string; // 进度条的样式
    strokeColor?: string; // 进度条的色彩
}


/**
 * 自定义进度条
 * @param props
 * @constructor
 */
const DiyProgress = (props: DiyProgressProps) => {
    const {
        percent = 0,
        decimal = 0,
        strokeWidth = 12,
        strokeLinecap = 'square',
        strokeColor = '#5B8FF9'
    } = props;

    useEffect(() => {
    }, []);


    return (
        <div className="bit-progress">
            <div className="bit-progress-outer">
                <div
                    className={["bit-progress-inner", percent < 20 ? 'bit-fixed-inner' : ''].join(' ')}
                    style={{borderRadius: strokeLinecap === 'round' ? 100 : 0}}
                >
                    <div
                        className={percent < 20 ? 'bit-fixed-text' : "bit-progress-text"}
                        style={{width: `${percent}%`}}
                    >{decimal}</div>
                    <div
                        className="bit-progress-bg"
                        style={{width: `${percent}%`, height: strokeWidth, backgroundColor: strokeColor}}
                    ></div>
                </div>
            </div>
        </div>
    )
}


export default DiyProgress;

创建style.less文件：

.bit-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    .bit-progress-outer {
        display: inline-block;
        width: 100%;
        .bit-progress-inner {
            position: relative;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            vertical-align: middle;
            background-color: transparent;
            border-radius: 0;
            .bit-progress-text {
                text-align: right;
                font-size: 14px;
                color: #313C42;
            }
            .bit-fixed-text {
                position: absolute;
                left: 0;
                top: -2px;
                z-index: 99;
                width: 100% !important;
                text-align: left;
                height: 14px;
                font-size: 14px;
                color: #313C42;
            }
            .bit-progress-bg {
                background-color: #1890FF;
            }
        }

        .bit-fixed-inner {
            display: flex;
            align-items: flex-end;
            height: 30px;
        }
    }
}

从上面代码可以看出，对于进度的宽度太小以至于让数值不能显示完全的思考已经得到解决。那就是使用定位的方法，通过判断当进度小于20%(percent < 20)时，将数值样式改为绝对定位的方式处理数值的显示效果，最终得以解决UI想实现的效果。

使用方法：

1）导入文件：
   import DiyProgress from "../../../component/DiyProgress/DiyProgress";

2）使用：
   const changeProgressBgColor = (flag: number) => {
       if (flag === 1) {
           return '#5B8FF9';
       }
       if (flag === 2) {
           return '#5AD8A6';
       }
       return '#313C42';
   }
   /*上述函数用于改变进度条背景色，根据自己业务变化使用*/
   
   <DiyProgress
       percent={35}
       decimal={0.35}
       strokeColor={changeProgressBgColor(flag)}
   />

该自定义进度条组件其实还可以将内层bit-progress-inner的高度设为属性用于动态变化设置，优化可扩展的属性还可以添加更改，这里只是提供了一个思路供参考，你也可能有更好的实现方式，所以需要我们一起分享一起进步，后续此组件也会作为插件上传至NPM上。

步骤进度条

步骤进度条就是带步骤的进度条。比如说，进度条总的用5个小方块代表100%，进度为26%在5个小方块中是如何显示的？1个小方块代表20%，26%就是1点几个小方块？由于没有1点几个的显示效果，所以就需要做四舍五入，26%就只有点亮1个小方块表示进度为26%。

本来应对上面的需求，Antd提供的进度条就能完美的解决，而在我们公司怎能让你如此简易，就算别人给你写好放那里我们的UI也要去改别个的边边角角，很有脾气（shit）,那就是数字必须在进度条上方居中显示，上方数字显示的是精确的值（带小数），进度条的值取整数显示进度值，小方块要带圆角效果。这不是硬要给自己整活么，懒得逼逼，整就整嘛。

不对，你给我搞活我也可以搞活呀，我就不给你写新组件了，我改改Antd的达到效果不就行了，这一下问题就好整多了。用一个<p>66.6</p>标签装精确值，然后隐藏掉Antd的数值显示，将小方块的样式改为圆角即可，so easy！

1）引入Antd进度条组件：
import {Progress} from 'antd';

2）使用组件：
const changeProgressBgColor = (flag: number) => {
    if (flag === 1) {
        return '#5B8FF9';
    }
    if (flag === 2) {
        return '#5AD8A6';
    }
    return '#313C42';
}
/*上述函数用于改变进度条背景色，根据自己业务变化使用*/

<div className="bit-progress-steps">
    <p className="bit-step-value">{yearSalary}</p>
    <Progress
        percent={yearSalaryGrade}
        steps={10}
        trailColor={'#D8D8D8'}
        strokeColor={changeProgressBgColor(flag)}
    />
</div>

3）设置并更改样式：
.bit-progress-steps {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 1px;

    .bit-step-value {
        width: 100%;
        text-align: center;
    }

    .ant-progress-steps {
        .ant-progress-text {
            display: none !important;
        }

        .ant-progress-steps-item {
            width: 10px !important;
            height: 12px !important;
            margin-right: 1px;
            border-radius: 2px;
        }
    }
}

来看看实际效果：

再一次至此，进度条相关的效果在我的实际项目工作中也就是这样的，上面所述的三种进度条效果也完美实现，优化的空间还有很多，但足以满足日常开发。第三种步骤进度条效果由于没有充足的时间用于组件编写，故改了改Antd的组件效果，后续将编写步骤进度条结合背景进度条和自定义进度条成一个插件发布到NPM仓库。

往期精彩文章

• 2022年前端技术趋势：你不进来看看，怎么赚它一个小目标？
• 假如古代有程序员写总结，大概就是这样吧 | 2021年终总结

后语

伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注在走呗^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。