index.jsx 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * Created by ZN on 2018/5/03.
  3. * 可配置属性:
  4. * show:为true是才显示,false不显示
  5. * text:显示在图标下的文字
  6. * img:自定义图标
  7. */
  8. import React, {Component} from 'react';
  9. /*import PropTypes from 'prop-types';*/
  10. import style from './index.less';
  11. import wnIcon from '@common/images/wn.png';
  12. import icon from '@common/images/loading.gif';
  13. import ReactDom from 'react-dom';
  14. /*const propTypes = {
  15. text: PropTypes.string,
  16. show: PropTypes.bool,
  17. shadeIsShow: PropTypes.bool
  18. };
  19. const defaultProps = {
  20. text: '拼命加载中...',
  21. shadeIsShow: true
  22. };*/
  23. // function Loading(props) {
  24. // const {text, img, show} = props;
  25. // return (
  26. // <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
  27. // {props.shadeIsShow?<div className={style['cover']}/>:''}
  28. // <div className={style['info']}>
  29. // <img src={img}/>
  30. // <p>{text}</p>
  31. // </div>
  32. // </div>
  33. // )
  34. // }
  35. class Loading extends React.Component{
  36. render(){
  37. const {text,show,type} = this.props;
  38. const domNode = document.getElementById('root');
  39. return ReactDom.createPortal(<React.Fragment>
  40. <div className={style['loading']} style={{display: show ? 'block' : 'none'}}>
  41. {/*{this.props.shadeIsShow?<div className={style['cover']}/>:null}*/}
  42. <div className={style['cover']}/>
  43. {type==='warning'?<div className={style['t-info']}>
  44. <p><img src={wnIcon} alt=""/>{text}</p>
  45. </div>:<div className={style['info']}>
  46. <img src={icon}/>
  47. <p>{text}</p>
  48. </div>}
  49. </div>
  50. </React.Fragment>,domNode
  51. )
  52. }
  53. }
  54. export default Loading;