Notice 通知提醒

概述

在界面右上角显示可关闭的全局通知,常用于以下场景:

  • 通知内容带有描述信息
  • 系统主动推送

代码示例

Notice 通知提醒 - 图1

基础用法

基本用法,默认在 4.5秒后关闭。如果 desc 参数为空或不填,则自动应用仅标题模式下的样式。

建议标题言简意赅,例如"删除成功",更详细的内容可以放在描述信息里。

  1. <template>
  2. <Button type="primary" @click="open(false)">Open notice</Button>
  3. <Button @click="open(true)">Open notice(only title)</Button>
  4. </template>
  5. <script>
  6. export default {
  7. methods: {
  8. open (nodesc) {
  9. this.$Notice.open({
  10. title: 'Notification title',
  11. desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
  12. });
  13. }
  14. }
  15. }
  16. </script>

Notice 通知提醒 - 图2

提醒类型

带有状态图标的提醒。

  1. <template>
  2. <p>With desc</p>
  3. <Button @click="info(false)">Info</Button>
  4. <Button @click="success(false)">Success</Button>
  5. <Button @click="warning(false)">Warning</Button>
  6. <Button @click="error(false)">Error</Button>
  7. <p>Only title</p>
  8. <Button @click="info(true)">Info</Button>
  9. <Button @click="success(true)">Success</Button>
  10. <Button @click="warning(true)">Warning</Button>
  11. <Button @click="error(true)">Error</Button>
  12. </template>
  13. <script>
  14. export default {
  15. methods: {
  16. info (nodesc) {
  17. this.$Notice.info({
  18. title: 'Notification title',
  19. desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
  20. });
  21. },
  22. success (nodesc) {
  23. this.$Notice.success({
  24. title: 'Notification title',
  25. desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
  26. });
  27. },
  28. warning (nodesc) {
  29. this.$Notice.warning({
  30. title: 'Notification title',
  31. desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
  32. });
  33. },
  34. error (nodesc) {
  35. this.$Notice.error({
  36. title: 'Notification title',
  37. desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
  38. });
  39. }
  40. }
  41. }
  42. </script>

Notice 通知提醒 - 图3

自定义时长

自定义时长,为 0 则不自动关闭。也可以在Notice.config()中全局配置,详见API。

  1. <template>
  2. <Button type="primary" @click="time">Open notice</Button>
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. time () {
  8. this.$Notice.open({
  9. title: 'Notification title',
  10. desc: 'This notification does not automatically close, and you need to click the close button to close.',
  11. duration: 0
  12. });
  13. }
  14. }
  15. }
  16. </script>

Notice 通知提醒 - 图4

Render 函数

你可以自定义 Render 函数来替代 desc

  1. <template>
  2. <Button type="primary" @click="renderFunc">Open notice</Button>
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. renderFunc () {
  8. this.$Notice.success({
  9. title: 'Notification title',
  10. desc: 'The desc will hide when you set render.',
  11. render: h => {
  12. return h('span', [
  13. 'This is created by ',
  14. h('a', 'render'),
  15. ' function'
  16. ])
  17. }
  18. });
  19. }
  20. }
  21. }
  22. </script>

API

Notice instance

通过直接调用以下方法来使用组件:

  • this.$Notice.open(config)
  • this.$Notice.info(config)
  • this.$Notice.success(config)
  • this.$Notice.warning(config)
  • this.$Notice.error(config)

以上方法隐式地创建及维护Vue组件。参数 config 为对象,具体说明如下:

属性 说明 类型 默认值
title 通知提醒的标题 String -
desc 通知提醒的内容,为空或不填时,自动应用仅标题模式下的样式 String -
render 自定义描述内容,使用 Vue 的 Render 函数,如果同时设置了 render 和 desc,则只显示 render 的内容 Function -
duration 自动关闭的延时,单位秒,不关闭可以写 0 Number 4.5
name 当前通知的唯一标识 String 自动
onClose 关闭时的回调 Function -

另外提供了全局配置、全局关闭某个通知和全局销毁的方法:

  • this.$Notice.config(options)
  • this.$Notice.close(name)
  • this.$Notice.destroy()
  1. this.$Notice.config({
  2. top: 50,
  3. duration: 3
  4. });
属性 说明 类型 默认值
top 通知组件距离顶端的距离,单位像素 Number 24
duration 默认自动关闭的延时,单位秒 Number 4.5