(记录笔记4)——4.4 Message全局提示

4.4 Message全局提示

全局展示操作反馈信息。

一.Message组件

1.Message组件

  • 引入Message:import { message } from ‘antd’;

import { message, Button } from 'antd';

const info = () => {
  message.info('This is a normal message');
};

ReactDOM.render(
  <Button type="primary" onClick={info}>Display normal message</Button>,
  mountNode);

二.实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCCK2wow-1640781484989)(http://ww1.sinaimg.cn/large/006pJUwqly1fxmf9bdizuj30n109caaj.jpg)]

//src\pages\ui\messages.js
import React from "react";
import "./ui.less";
import { Card, Button, message, Spin, Icon, Alert } from "antd";

export default class Message extends React.Component {
  showMeassage = type => {
    message[type]("恭喜你,React课程晋级成功.");
  };
  render() {
    return (
      <div>
        <Card title="全局提示框" className="card-wrap">
          <Button type="primary" onClick={() => this.showMeassage("success")}>
            Success
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("info")}>
            Info
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("warning")}>
            Warning
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("error")}>
            Error
          </Button>
          <Button type="primary" onClick={() => this.showMeassage("loading")}>
            Loading
          </Button>
        </Card>
      </div>
    );
  }
}

API#

组件提供了一些静态方法,使用方式和参数如下:

message.success(content)


  • message.success(content, [duration], onClose)

  • message.error(content, [duration], onClose)

  • message.info(content, [duration], onClose)

  • message.warning(content, [duration], onClose)

  • message.loading(content, [duration], onClose)

    参数说明类型默认值
    content提示内容string|ReactNode-
    duration自动关闭的延时,单位秒。设为 0 时不自动关闭。number3
    onClose关闭时触发的回调函数Function-
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值