Notification 通知提醒框

全局展示通知提醒信息。

何时使用

在系统四个角显示通知提醒信息。经常用于以下情况：

  • 较为复杂的通知内容。
  • 带有交互的通知，给出用户下一步的行动点。
  • 系统主动推送。

代码演示

基本用法

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script lang="ts">
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    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!');
        },
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
带有图标的通知提醒框

通知提醒框左侧有图标。

<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 lang="ts">
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const openNotificationWithIcon = (type: string) => {
      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.',
      });
    };
    return {
      openNotificationWithIcon,
    };
  },
});
</script>
自定义按钮

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script lang="ts">
import { notification, Button } from 'ant-design-vue';
import { h, defineComponent } from 'vue';
const close = () => {
  console.log(
    'Notification was closed. Either the close button was clicked or duration time elapsed.',
  );
};
export default defineComponent({
  setup() {
    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),
          },
          'Confirm',
        ),
        key,
        onClose: close,
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
位置

可以设置通知从右上角、右下角、左下角、左上角弹出。

<template>
  <div>
    <a-button type="primary" @click="openNotification('topLeft')">
      <radius-upleft-outlined />
      topLeft
    </a-button>
    <a-button type="primary" @click="openNotification('topRight')">
      <radius-upright-outlined />
      topRight
    </a-button>
    <a-divider />
    <a-button type="primary" @click="openNotification('bottomLeft')">
      <radius-bottomleft-outlined />
      bottomLeft
    </a-button>
    <a-button type="primary" @click="openNotification('bottomRight')">
      <radius-bottomright-outlined />
      bottomRight
    </a-button>
  </div>
</template>
<script lang="ts">
import {
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
} from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    RadiusUpleftOutlined,
    RadiusUprightOutlined,
    RadiusBottomleftOutlined,
    RadiusBottomrightOutlined,
  },
  setup() {
    const openNotification = (placement: string) => {
      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,
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
自动关闭的延时

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script lang="ts">
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    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,
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
自定义图标

图标可以被自定义。

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script lang="ts">
import { SmileOutlined } from '@ant-design/icons-vue';
import { notification } from 'ant-design-vue';
import { defineComponent, h } from 'vue';
export default defineComponent({
  setup() {
    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.',
        icon: h(SmileOutlined, { style: 'color: #108ee9' }),
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
自定义样式

使用 style 和 className 来定义样式。

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    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.',
        style: {
          width: '600px',
          marginLeft: `${335 - 600}px`,
        },
      });
    };
    return {
      openNotification,
    };
  },
});
</script>
更新消息内容

可以通过唯一的 key 来更新内容。

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script lang="ts">
import { notification } from 'ant-design-vue';
import { defineComponent } from 'vue';
const key = 'updatable';
export default defineComponent({
  setup() {
    const openNotification = () => {
      notification.open({
        key,
        message: 'Notification Title',
        description: 'description.',
      });
      setTimeout(() => {
        notification.open({
          key,
          message: 'New Title',
          description: 'New description.',
        });
      }, 1000);
    };
    return {
      openNotification,
    };
  },
});
</script>

API#

config 参数如下：

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

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

notification.config({
  placement: 'bottomRight',
  bottom: '50px',
  duration: 3,
});
参数 说明 类型 默认值 版本
bottom 消息从底部弹出时，距离底部的位置，单位像素。 string 24px
duration 默认自动关闭延时，单位秒 number 4.5
getContainer 配置渲染节点的输出位置 () => HTMLNode () => document.body
placement 弹出位置，可选 topLeft topRight bottomLeft bottomRight string topRight
top 消息从顶部弹出时，距离顶部的位置，单位像素。 string 24px
closeIcon 自定义关闭图标 VNode -