Notification 通知提醒框

全局展示通知提醒信息。

代码演示

Hooks 调用（推荐）

通过 notification.useNotification 创建支持读取 context 的 contextHolder。请注意，我们推荐通过顶层注册的方式代替 notification 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。

vue

<template>
  <a-space>
    <a-button type="primary" @click="() => open('topLeft')">
      topLeft
    </a-button>
    <a-button type="primary" @click="() => open('topRight')">
      topRight
    </a-button>
  </a-space>
  <a-divider />
  <a-space>
    <a-button type="primary" @click="() => open('bottomLeft')">
      bottomLeft
    </a-button>
    <a-button type="primary" @click="() => open('bottomRight')">
      bottomRight
    </a-button>
  </a-space>
  <contextHolder />
</template>
<script setup>
import { notification } from 'ant-design-vue';
const [api, contextHolder] = notification.useNotification();
const open = placement => openNotification(placement);
const openNotification = placement => {
  api.info({
    message: `Notification ${placement}`,
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    placement,
  });
};
</script>

基本用法

最简单的用法，4.5 秒后自动关闭。

vue

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script setup>
import { notification } from 'ant-design-vue';
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.',
    onClick: () => {
      console.log('Notification Clicked!');
    },
  });
};
</script>

自动关闭的延时

自定义通知框自动关闭的延时，默认 4.5s，取消自动关闭只要将该值设为 0 即可。

vue

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script setup>
import { notification } from 'ant-design-vue';
const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description:
      'I will never close automatically. I will be close automatically. I will never close automatically.',
    duration: 0,
  });
};
</script>

带有图标的通知提醒框

通知提醒框左侧有图标。

vue

<template>
  <div>
    <a-button @click="() => openNotificationWithIcon('success')">Success</a-button>
    <a-button @click="() => openNotificationWithIcon('info')">Info</a-button>
    <a-button @click="() => openNotificationWithIcon('warning')">Warning</a-button>
    <a-button @click="() => openNotificationWithIcon('error')">Error</a-button>
  </div>
</template>
<script setup>
import { notification } from 'ant-design-vue';
const openNotificationWithIcon = type => {
  notification[type]({
    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.',
  });
};
</script>

自定义按钮

自定义关闭按钮的样式和文字。

vue

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script setup>
import { notification, Button } from 'ant-design-vue';
import { h } from 'vue';
const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};
const openNotification = () => {
  const key = `open${Date.now()}`;
  notification.open({
    message: 'Notification Title',
    description:
      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
    btn: () =>
      h(
        Button,
        {
          type: 'primary',
          size: 'small',
          onClick: () => notification.close(key),
        },
        {
          default: () => 'Confirm',
        },
      ),
    key,
    onClose: close,
  });
};
</script>

位置

使用 placement 可以配置通知从右上角、右下角、左下角、左上角弹出。

vue

<template>
  <div>
    <a-button type="primary" @click="openNotification('top')">
      top
    </a-button>
    <a-button type="primary" @click="openNotification('bottom')">
      bottom
    </a-button>
    <a-button type="primary" @click="openNotification('topLeft')">
      topLeft
    </a-button>
    <a-button type="primary" @click="openNotification('topRight')">
      topRight
    </a-button>
    <a-divider />
    <a-button type="primary" @click="openNotification('bottomLeft')">
      bottomLeft
    </a-button>
    <a-button type="primary" @click="openNotification('bottomRight')">
      bottomRight
    </a-button>
  </div>
</template>
<script setup>
import { notification } from 'ant-design-vue';
const openNotification = placement => {
  notification.open({
    message: `Notification ${placement}`,
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    placement,
  });
};
</script>

API

notification.success(config)
notification.error(config)
notification.info(config)
notification.warning(config)
notification.warn(config)
notification.open(config)
notification.close(key: String)
notification.destroy()
notification.useNotification()

config 参数如下：

参数	说明	类型	默认值
bottom	消息从底部弹出时，距离底部的位置，单位像素。	string	24px
btn	自定义关闭按钮	VNode \| () => VNode	-
class	自定义 CSS class	string	-
closeIcon	自定义关闭图标	VNode \| () => VNode	-
description	通知提醒内容，必选	string \| VNode \| () => VNode	-
duration	默认 4.5 秒后自动关闭，配置为 null 则不自动关闭	number	4.5
getContainer	配置渲染节点的输出位置	() => HTMLNode	() => document.body
icon	自定义图标	VNode \| () => VNode	-
key	当前通知唯一标志	string	-
message	通知提醒标题，必选	string \| VNode \| () => VNode	-
placement	弹出位置，可选 top topLeft topRight bottom bottomLeft bottomRight	string	topRight
style	自定义内联样式	Object \| string	-
top	消息从顶部弹出时，距离顶部的位置，单位像素。	string	24px
onClick	点击通知时触发的回调函数	Function	-
onClose	点击默认关闭按钮时触发的回调函数	Function	-

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

notification.config(options)

当你使用 ConfigProvider 进行全局化配置时，系统会默认自动开启 RTL 模式。当你想单独使用，可通过如下设置开启 RTL 模式。

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

参数	说明	类型	默认值
bottom	消息从底部弹出时，距离底部的位置，单位像素。	string	24px
closeIcon	自定义关闭图标	VNode \| () => VNode	-
duration	默认自动关闭延时，单位秒	number	4.5
getContainer	配置渲染节点的输出位置	() => HTMLNode	() => document.body
maxCount	最大显示数, 超过限制时，最早的消息会被自动关闭	number	-
placement	弹出位置，可选 topLeft topRight bottomLeft bottomRight	string	topRight
rtl	是否开启 RTL 模式	boolean	false
top	消息从顶部弹出时，距离顶部的位置，单位像素。	string	24px

Notification 通知提醒框 ​

代码演示 ​

Hooks 调用（推荐） ​

基本用法 ​

自动关闭的延时 ​

带有图标的通知提醒框 ​

自定义按钮 ​

位置 ​

API ​