通知提醒框

全局展示通知提醒信息。

何时使用

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

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

代码演示

基本

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification() {
        this.$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>

自定义图标

图标可以被自定义。

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification() {
        this.$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: <a-icon type="smile" style="color: #108ee9" />,
        });
      },
    },
  };
</script>

自定义样式

使用 style 和 className 来定义样式。

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification() {
        this.$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`,
          },
        });
      },
    },
  };
</script>

自动关闭的延时

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  export default {
    methods: {
      openNotification() {
        this.$notification.open({
          message: 'Notification Title',
          description:
            'I will never close automatically. I will be close automatically. I will never close automatically.',
          duration: 0,
        });
      },
    },
  };
</script>

位置

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

<template>
  <div>
    <a-select v-model="selected" :style="{ width: '120px', marginRight: '10px' }">
      <a-select-option v-for="val in options" :key="val" :value="val">{{val}}</a-select-option>
    </a-select>
    <a-button type="primary" @click="openNotification">Open the notification box</a-button>
  </div>
</template>
<script>
  const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
  export default {
    data() {
      return {
        options,
        selected: 'topRight',
      };
    },
    watch: {
      selected(val) {
        this.$notification.config({
          placement: val,
        });
      },
    },
    methods: {
      openNotification(val) {
        this.$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.',
        });
      },
    },
  };
</script>

自定义按钮

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  const close = () => {
    console.log(
      'Notification was closed. Either the close button was clicked or duration time elapsed.',
    );
  };
  export default {
    methods: {
      openNotification() {
        const key = `open${Date.now()}`;
        this.$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 => {
            return h(
              'a-button',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                on: {
                  click: () => this.$notification.close(key),
                },
              },
              'Confirm',
            );
          },
          key,
          onClose: close,
        });
      },
    },
  };
</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>
  export default {
    methods: {
      openNotificationWithIcon(type) {
        this.$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>

更新消息内容

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

<template>
  <a-button type="primary" @click="openNotification">Open the notification box</a-button>
</template>
<script>
  const key = 'updatable';
  export default {
    methods: {
      openNotification() {
        this.$notification.open({
          key,
          message: 'Notification Title',
          description: 'description.',
        });
        setTimeout(() => {
          this.$notification.open({
            key,
            message: 'New Title',
            description: 'New description.',
          });
        }, 1000);
      },
    },
  };
</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()

config 参数如下：

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

• notification.config(options)

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