funnyui/src/avatar/index.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import React from "react";
import { PropTypes } from "prop-types";
import "./index.scss";

class Avatar extends React.PureComponent {
  render() {
    let {
      pathOrAvatarCls,
      width,
      height,
      onClick,
      authenticated,
      BadgeNum,
      square
    } = this.props;

    let styl = { width, height };

    let res = (
      <div onClick={onClick} className="avatarBox" style={styl}>
        <div
          className={`avatar ${square ? "avatar-square" : ""} ${
            authenticated ? "avatar-border" : ""
          }`}
        >
          {pathOrAvatarCls.indexOf("icon-") !== 0 ? (
            <img className="img" alt="" style={styl} src={pathOrAvatarCls} />
          ) : (
            <div className={`empty-avatar ${authenticated ? "bg-wt" : ""}`}>
              <i
                style={{ fontSize: width, lineHeight: width }}
                className={`iconfont ${pathOrAvatarCls}`}
              />
            </div>
          )}
          {authenticated ? (
            <div className="auth c-wt">{authenticated}</div>
          ) : (
            ""
          )}
        </div>
        {BadgeNum !== undefined && (
          <div className="badgeBox">
            {/* <Badge style={{backgroundColor:'#ED5565'}} text={BadgeNum}/> */}
          </div>
        )}
      </div>
    );

    return res;
  }
}

Avatar.propTypes = {
  pathOrAvatarCls: PropTypes.string,
  width: PropTypes.string,
  height: PropTypes.string,
  onClick: PropTypes.func,
  authenticated: PropTypes.string,
  BadgeNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

Avatar.defaultProps = {
  pathOrAvatarCls:
    "https://dss0.baidu.com/6LZXsjikBxIFlNKl8IuM_a/tb/cms/ngmis/file_1584672553807.jpg",
  width: "45px",
  height: "45px",
  authenticated: "已认证", // 图片下方显示的文字信息和白色边框
  BadgeNum: 0,
  square: true //是否是正方形
};

// ReactDOM.render(<Avatar path='./jiankangshi.jpg'/>, document.getElementById("root"));
export default Avatar;