react进度条组件开发

进度条组件开发

一、创建一个Progress.js文件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Progress extends Component {

    constructor(props) {
        super(props)
    }

    renderProgress () {
        const progressItemStyle = {
           //  进度条的进度分成100份
            width: `${100/this.props.nums}%`,
            height: '100%'
        };
        var ele = [];
        for (var i = 0; i < this.props.nums; i++) {
            if (i <= this.props.index) {
                ele.push(
                    

                )
            }
            // else {
            //     ele.push(
            //         

            //     )
            // }
        }
        return ele;
    }

    render() {

        const progressStyle = {
            display: '-webkit-flex',
            color: this.props.progressColor,
            margin: '0 25px'
        };
        
        //  进度条的样式
        const progressArticleStyle = {
            height: 12,
            border: '1px solid #B5D3FF',
            //  进度条的样式长度
            width: '70%',
            display: '-webkit-flex',
            borderRadius: 5,
            overflow: 'hidden',
            marginTop: 10,
            backgroundColor:'#B5D3FF',
            marginLeft:-25
        };

        return (
            

                

                    {this.renderProgress()}
                
                

                    {this.props.index}%
                
            
        )
    }
}

Progress.propTypes = {
    //  进度条需要区分的个数
    nums: PropTypes.number.isRequired,
    //  当前进度条所处的位置
    index: PropTypes.number.isRequired,
    //  进度条的颜色
    progressColor: PropTypes.string.isRequired
};

二、具体使用

//  将他所需要的参数传入

三、进度条开发完毕

版权声明：本文为博主原创文章，转载请标明原始博文地址。