iDesign

Notification 消息通知

全局展示通知提醒信息。

基本用法

与 Message 组件同理，可使用 Notification.info | Notification.success | Notification.warning | Notification.error 来显示对应类型的全局通知：

<template>
  <div className="idesign-demo-block-row">
    <i-button type="primary" @click="() => this.$notification.info('这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通这是一条消息通知')">
      默认通知
    </i-button>
    <i-button type="success" @click="() => this.$notification.success('这是一条成功通知这是一条成功通知这是一条成功通知这是一条成功通知这是一条成功通知')">
      成功通知
    </i-button>
    <i-button type="warning" @click="() => this.$notification.warning('这是一条警告通知这是一条警告通知这是一条警告通知这是一条警告通知这是一条警告通知')">
      警告通知
    </i-button>
    <i-button type="error" @click="() => this.$notification.error('这是一条错误通知这是一条错误通知这是一条错误通知这是一条错误通知这是一条错误通知')">
      错误通知
    </i-button>
  </div>
</template>

<script setup></script>
显示代码

传入配置项

也可通过传入配置项来使用：

<template>
  <div className="idesign-demo-block-row">
    <i-button
      type="primary"
      @click="
        () =>
          this.$notification.info({
            content:
              '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通这是一条消息通知'
          })
      "
    >
      默认通知
    </i-button>
    <i-button
      type="success"
      @click="
        () =>
          this.$notification.success({
            content:
              '这是一条成功通知这是一条成功通知这是一条成功通知这是一条成功通知这是一条成功通知'
          })
      "
    >
      成功通知
    </i-button>
    <i-button
      type="warning"
      @click="
        () =>
          this.$notification.warning({
            content:
              '这是一条警告通知这是一条警告通知这是一条警告通知这是一条警告通知这是一条警告通知'
          })
      "
    >
      警告通知
    </i-button>
    <i-button
      type="error"
      @click="
        () =>
          this.$notification.error({
            content:
              '这是一条错误通知这是一条错误通知这是一条错误通知这是一条错误通知这是一条错误通知'
          })
      "
    >
      错误通知
    </i-button>
  </div>
</template>

<script setup></script>
显示代码

添加通知标题

注意，标题仅可通过传入 title 配置项的方式来添加：

<template>
  <i-button
    @click="
      () =>
        this.$notification.info({
          title: '这是标题',
          content:
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知'
        })
    "
  >
    有标题的通知
  </i-button>
</template>

<script setup></script>
显示代码

通知持续时间

默认方式可通过第二个参数来设置通知持续时间，配置项的方式则可通过 duration 来设置，单位为秒，默认为 3，当设为 0 时表示不关闭：

<template>
  <div className="idesign-demo-block-row">
    <i-button
      @click="
        () =>
          this.$notification.info(
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            0
          )
      "
    >
      通知不关闭（默认）
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            title: '这是一条不关闭的通知',
            content:
              '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            duration: 0,
            closeable: true
          })
      "
    >
      通知不关闭（配置项）
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info(
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            2
          )
      "
    >
      2秒后关闭的通知
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            title: '这是一条持续 10 秒的通知',
            content:
              '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            duration: 10
          })
      "
    >
      10秒后关闭的通知
    </i-button>
  </div>
</template>

<script setup></script>
显示代码

通知出现位置

默认方式可通过第三个参数来设置通知出现的位置，配置项的方式则可通过 position 来设置，默认为 top-right：

<template>
  <div className="idesign-demo-block-row">
    <i-button
      @click="
        () =>
          this.$notification.info(
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            3,
            'top-left'
          )
      "
    >
      展示在左上角的通知
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info(
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            3,
            'top-right'
          )
      "
    >
      展示在右上角的通知
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            title: '默认通知',
            content:
              '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            position: 'bottom-right'
          })
      "
    >
      展示在右下角的通知
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            title: '默认通知',
            content:
              '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            position: 'bottom-left'
          })
      "
    >
      展示在左下角的通知
    </i-button>
  </div>
</template>

<script setup></script>
显示代码

可关闭的通知

默认方式可通过第四个参数来设置是否显示关闭按钮，配置项的方式则可通过 closeable 来设置，默认为 false：

<template>
  <div className="idesign-demo-block-row">
    <i-button
      @click="
        () =>
          this.$notification.info(
            '这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知这是一条消息通知',
            0,
            'top-right',
            true
          )
      "
    >
      显示关闭按钮的通知（默认）
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            content: '这是一个没有标题的纯内容通知',
            duration: 0,
            position: 'bottom-right',
            closeable: true
          })
      "
    >
      显示关闭按钮的通知（配置项）
    </i-button>
  </div>
</template>

<script setup>
import { h } from 'vue'
import { Button } from 'idesign-vue'

const a = h('button', '这是通知的内容')
const b = h(Button, '自定义组件内容')
</script>
显示代码

自定义通知内容

通知内容或标题节点均可自定义展示：

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$notification.info(b)">
      自定义通知内容（默认）
    </i-button>
    <i-button
      @click="
        () =>
          this.$notification.info({
            title: a,
            content: b
          })
      "
    >
      自定义通知内容（配置项）
    </i-button>
  </div>
</template>

<script setup>
import { h } from 'vue'
import { Button } from 'idesign-vue'

const a = h('button', '这是通知的标题')
const b = h(Button, '自定义组件内容')
</script>
显示代码

手动关闭所有提示

可通过 Notification.clear() 来关闭所有提示：

<template>
  <div className="idesign-demo-block-row">
    <i-button @click="() => this.$notification.clear()">关闭所有通知</i-button>
    <i-button @click="() => this.$notification.clear('top-left')">
      关闭左上角通知
    </i-button>
    <i-button @click="() => this.$notification.clear('top-right')">
      关闭右上角通知
    </i-button>
    <i-button @click="() => this.$notification.clear('bottom-left')">
      关闭左下角通知
    </i-button>
    <i-button @click="() => this.$notification.clear('bottom-right')">
      关闭右下角通知
    </i-button>
  </div>
</template>

<script setup></script>
显示代码

Notification 方法

属性说明类型
info显示信息通知NotificationMethod
success显示成功通知NotificationMethod
warning显示警告通知NotificationMethod
error显示错误通知NotificationMethod
clear清除全部通知(position?: PositionType) => void
type NotificationMethod = (
  messageConfig: string | VNodeTypes | NotificationConfigType,
  duration?: number,
  position?: PositionType,
  closeable?: boolean
) => void;

type PositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

Notification 配置项

属性说明类型默认值
title通知标题string〡VNodeTypes--
content通知内容string〡VNodeTypes--
duration消息持续时间，单位秒number3
position通知位置PositionTypetop-right
closeable通知是否可关闭booleanfalse
Last Updated:
Contributors: Leophen