React共享单车后台管理系统开发（记录笔记4）——4.3 Notification 通知提醒框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35812380/article/details/84560947

4.3 Notification 通知提醒框

全局展示通知提醒信息。

一.Notification组件

1.Notification组件

• 引入Notification:import {notification} from “antd”;

  import { Button, notification } from 'antd';
  
  const openNotification = () => {
    notification.open({
      message: 'Notification Title',
      description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    });
  };
  
  ReactDOM.render(
    <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
    mountNode);
  

  • 效果如下:

  

二.实例一(通知提醒)

import React from "react";
import { Card, Button, notification } from "antd";
import "./ui.less";
export default class Notice extends React.Component {
  state = {};
  handleOpen = type => {};
  handleConfirm = type => {};
  openNotifications = type => {
    notification[type]({
      message: "发工资了",
      description: "上个月考勤22天,迟到12天,实发工资250,请笑纳"
    });
  };
  handleOk = () => {};
  render() {
    return (
      <div>
        <Card title="通知提醒框" className="card-wrap">
          <Button
            type="primary"
            onClick={() => this.openNotifications("success")}
          >
            Success
          </Button>
          <Button type="primary" onClick={() => this.openNotifications("info")}>
            Info
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("warning")}
          >
            Warning
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("error")}
          >
            Error
          </Button>
        </Card>
   
      </div>
    );
  }
}

三.实例二(通知提醒 + 方向控制)

• placement 弹出位置，可选 topLeft topRight bottomLeft``bottomRight string topRight
• notification.config(options)

import React from "react";
import { Card, Button, notification } from "antd";
import "./ui.less";
export default class Notice extends React.Component {
  openNotifications = (type, direction) => {
    if (direction) {
      //如果配置了direction,说明执行了有方向的通知框,将placement设置为当前方向
      notification.config({
        placement:direction
      });
    }
    notification[type]({
      message: "发工资了",
      description: "上个月考勤22天,迟到12天,实发工资250,请笑纳"
    });
  };
  handleOk = () => {};
  render() {
    return (
      <div>
        <Card title="通知提醒框" className="card-wrap">
          <Button
            type="primary"
            onClick={() => this.openNotifications("success")}
          >
            Success
          </Button>
          <Button type="primary" onClick={() => this.openNotifications("info")}>
            Info
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("warning")}
          >
            Warning
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("error")}
          >
            Error
          </Button>
        </Card>
        <Card title="通知提醒框-方向控制" className="card-wrap">
          <Button
            type="primary"
            onClick={() => this.openNotifications("success", "topLeft")}
          >
            Success-TopLeft
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("info", "topRight")}
          >
            Info-TopRight
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("warning", "bottomLeft")}
          >
            Warning-BottomLeft
          </Button>
          <Button
            type="primary"
            onClick={() => this.openNotifications("error", "bottomRight")}
          >
            Error-BottomRight
          </Button>
        </Card>
      </div>
    );
  }
}

核心Api

• notification.success(config)
• notification.error(config)
• notification.info(config)
• notification.warning(config)
• notification.warn(config)

核心config

参数	说明通知提醒标题，必选	类型string	默认值
message	通知提醒标题，必选	string|ReactNode	-
description	通知提醒内容，必选	string|ReactNode	-
placement	弹出位置，可选 topLeft topRight bottomLeft``bottomRight	string	topRight

还提供了一个全局配置方法，在调用前提前配置，全局一次生效。

• notification.config(options)

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
});