Notification

Author: weiq

src/layouts/BasicLayout.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'dva';
 import { Switch, NavLink, routerRedux } from 'dva/router';
 import $$ from 'cmn-utils';
+import { Notification } from 'components';
 import './styles/basic.less';
 
 @connect()
@@ -26,6 +27,7 @@ export default class BasicLayout extends React.PureComponent {
         <Switch>
           {childRoutes}
         </Switch>
+        <Notification />
       </div>
     );
   }

src/routes/Home/components/index.js

@@ -3,10 +3,19 @@ import { connect } from 'dva';
 import logo from 'assets/images/logo.png';
 import './style.less';
 import BaseComponent from 'components/BaseComponent';
+import { Notification } from 'components';
 import $$ from 'cmn-utils';
+const notice = Notification.notice;
 
 @connect()
 export default class Home extends BaseComponent {
+  notice = (e) => {
+    this.close = notice(e.target.innerHTML, e.target.innerHTML);
+  }
+
+  closeNotice = () => {
+    this.close && this.close();
+  }
 
   render() {
     const user = $$.getStore('user');
@@ -15,6 +24,13 @@ export default class Home extends BaseComponent {
       <div className="home-page">
         <img src={logo} alt="" />
         <div>Welcome Home {user.name}</div>
+        <hr />
+        <button onClick={this.notice}>success</button>
+        <button onClick={this.notice}>error</button>
+        <button onClick={this.notice}>warn</button>
+        <button onClick={this.notice}>default</button>
+        <button onClick={this.notice}>dark</button> &nbsp;
+        <button onClick={this.closeNotice}>close</button>
       </div>
     )
   }

src/routes/UserInfo/components/index.js

@@ -46,6 +46,17 @@ export default class UserInfo extends Component {
     });
   }
 
+  throwRequestError = () => {
+    this.props.dispatch({
+      type: 'userInfo/@request',
+      payload: {
+        valueField: 'httpbin',
+        url: 'http://httpbin.org/post',
+        method: 'GET',
+      }
+    });
+  }
+
   render() {
     const {info, httpbin, pageData} = this.props.userInfo;
     const {pageNum, total, totalPages} = pageData;
@@ -90,6 +101,10 @@ export default class UserInfo extends Component {
           <button disabled={pageNum < totalPages ? false : true} onClick={e => this.turnPage()}>下一页</button>
           当前为第<b>{pageNum}</b>页，总计<b>{total}</b>条数据,共<b>{totalPages}</b>页
         </div>
+
+        <h2>全局异常捕获</h2>
+        <button onClick={this.throwRequestError}>点我生成一个异常</button>
+
         <PageLoading loading={this.props.loading} />
       </div>
     )