通知提醒框

全局展示通知提醒信息。

何时使用

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

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

代码演示

Open the notification box

基本

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

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. openNotification() {
  10. this.$notification.open({
  11. message: 'Notification Title',
  12. description:
  13. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  14. onClick: () => {
  15. console.log('Notification Clicked!');
  16. },
  17. });
  18. },
  19. },
  20. };
  21. </script>

Open the notification box

自定义样式

使用 style 和 className 来定义样式。

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. openNotification() {
  10. this.$notification.open({
  11. message: 'Notification Title',
  12. description:
  13. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  14. style: {
  15. width: '600px',
  16. marginLeft: `${335 - 600}px`,
  17. },
  18. });
  19. },
  20. },
  21. };
  22. </script>

Notification通知提醒框 - 图1

位置

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

  1. <template>
  2. <div>
  3. <a-button type="primary" @click="openNotification('topLeft')">
  4. <a-icon type="radius-upleft" />
  5. topLeft
  6. </a-button>
  7. <a-button type="primary" @click="openNotification('topRight')">
  8. <a-icon type="radius-upright" />
  9. topRight
  10. </a-button>
  11. <a-divider />
  12. <a-button type="primary" @click="openNotification('bottomLeft')">
  13. <a-icon type="radius-bottomleft" />
  14. bottomLeft
  15. </a-button>
  16. <a-button type="primary" @click="openNotification('bottomRight')">
  17. <a-icon type="radius-bottomright" />
  18. bottomRight
  19. </a-button>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. methods: {
  25. openNotification(placement) {
  26. this.$notification.open({
  27. message: `Notification ${placement}`,
  28. description:
  29. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  30. placement,
  31. });
  32. },
  33. },
  34. };
  35. </script>

Notification通知提醒框 - 图2

带有图标的通知提醒框

通知提醒框左侧有图标。

  1. <template>
  2. <div>
  3. <a-button @click="() => openNotificationWithIcon('success')">
  4. Success
  5. </a-button>
  6. <a-button @click="() => openNotificationWithIcon('info')">
  7. Info
  8. </a-button>
  9. <a-button @click="() => openNotificationWithIcon('warning')">
  10. Warning
  11. </a-button>
  12. <a-button @click="() => openNotificationWithIcon('error')">
  13. Error
  14. </a-button>
  15. </div>
  16. </template>
  17. <script>
  18. export default {
  19. methods: {
  20. openNotificationWithIcon(type) {
  21. this.$notification[type]({
  22. message: 'Notification Title',
  23. description:
  24. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  25. });
  26. },
  27. },
  28. };
  29. </script>

Open the notification box

自定义图标

图标可以被自定义。

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. openNotification() {
  10. this.$notification.open({
  11. message: 'Notification Title',
  12. description:
  13. 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  14. icon: <a-icon type="smile" style="color: #108ee9" />,
  15. });
  16. },
  17. },
  18. };
  19. </script>

Open the notification box

自动关闭的延时

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

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. openNotification() {
  10. this.$notification.open({
  11. message: 'Notification Title',
  12. description:
  13. 'I will never close automatically. I will be close automatically. I will never close automatically.',
  14. duration: 0,
  15. });
  16. },
  17. },
  18. };
  19. </script>

Open the notification box

自定义按钮

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

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. const close = () => {
  8. console.log(
  9. 'Notification was closed. Either the close button was clicked or duration time elapsed.',
  10. );
  11. };
  12. export default {
  13. methods: {
  14. openNotification() {
  15. const key = `open${Date.now()}`;
  16. this.$notification.open({
  17. message: 'Notification Title',
  18. description:
  19. 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
  20. btn: h => {
  21. return h(
  22. 'a-button',
  23. {
  24. props: {
  25. type: 'primary',
  26. size: 'small',
  27. },
  28. on: {
  29. click: () => this.$notification.close(key),
  30. },
  31. },
  32. 'Confirm',
  33. );
  34. },
  35. key,
  36. onClose: close,
  37. });
  38. },
  39. },
  40. };
  41. </script>

Open the notification box

更新消息内容

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

  1. <template>
  2. <a-button type="primary" @click="openNotification">
  3. Open the notification box
  4. </a-button>
  5. </template>
  6. <script>
  7. const key = 'updatable';
  8. export default {
  9. methods: {
  10. openNotification() {
  11. this.$notification.open({
  12. key,
  13. message: 'Notification Title',
  14. description: 'description.',
  15. });
  16. setTimeout(() => {
  17. this.$notification.open({
  18. key,
  19. message: 'New Title',
  20. description: 'New description.',
  21. });
  22. }, 1000);
  23. },
  24. },
  25. };
  26. </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 参数如下:

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

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

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