|
@@ -0,0 +1,47 @@
|
|
|
+import React from 'react';
|
|
|
+import style from './index.less';
|
|
|
+import close from "../../images/close-icon.png";
|
|
|
+/**
|
|
|
+*小弹窗,没有蒙层,例如计算公式结果
|
|
|
+*title:弹窗标题
|
|
|
+*icon:标题旁边的icon,不传不显示
|
|
|
+*children:弹窗内容
|
|
|
+*show:弹窗显示
|
|
|
+*footer:是否显示底部“确定”按钮,默认不显示
|
|
|
+*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} = 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)}>确定</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default MiniToast;
|