newICSS/src/common/components/MiniToast/index.jsx

import React from 'react';
import style from './index.less';
import close from "../../images/close-icon.png";
/**
*小弹窗，没有蒙层，例如计算公式结果
*title:弹窗标题
*icon:标题旁边的icon,不传不显示
*children:弹窗内容
*show:弹窗显示
*footer:是否显示底部“确定”按钮，默认不显示
*confirmText:确认按钮文字
*close:关闭弹窗事件
*confirm:确定事件
*使用时，父元素需要加相对定位position: relative;
*/
class MiniToast extends React.Component{
  constructor(props){
    super(props);
  }

  close(){
    const {close} = this.props;
    close&&close();
  }

  confirm(){
    const {confirm} = this.props;
    confirm&&confirm();
  }


  render(){
    const {show,title,icon,children,footer,confirmText} = this.props;
    return <div className={style["infoBox"]} style={{display:show?'block':'none'}}>
              <p className={style["infoTitle"]}>
                {icon?<img src={icon} />:''}
                {title}
                <img src={close} onClick={this.close.bind(this)} className={style["closeIcon"]}/>
              </p>
              <div className={style["infoCon"]}>{children}</div>
              <div className={style["infoFoot"]} style={{display:footer?'block':'none'}}>
                <span onClick={this.confirm.bind(this)}>{confirmText?confirmText:'确定'}</span>
              </div>
            </div>
  }
}

export default MiniToast;