Notify 消息通知 - Vant 4

🔔 Notify 消息提示

🎯 介绍

Notify 组件在页面顶部展示消息提示，支持组件调用和函数调用两种方式。让用户及时获得重要信息反馈！

📦 引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from'vue'; import { Notify } from'vant'; const app = createApp(); app.use(Notify);

🚀 函数调用

为了便于使用 Notify，Vant 提供了一系列辅助函数，通过辅助函数可以快速唤起全局的消息提示。

比如使用 showNotify 函数，调用后会直接在页面中渲染对应的提示。

import { showNotify } from'vant'; showNotify({ message: '提示' });

🎯 代码演示

🔧 基础用法

最简单的消息通知，就像给用户发送一条重要短信 📱

import { showNotify, closeNotify } from 'vant';

// 3 秒后自动关闭，就像闹钟一样准时 ⏰
showNotify('通知内容');

// 主动关闭，随时可以让消息消失 ✨
closeNotify();

html

<template>
  <van-cell-group>
    <van-cell is-link title="基础用法" @click="showBasicNotify" />
    <van-cell is-link title="手动关闭" @click="showManualNotify" />
  </van-cell-group>
</template>

<script setup>
import { showNotify, closeNotify } from 'vant';

const showBasicNotify = () => {
  showNotify('这是一条基础通知 📢');
};

const showManualNotify = () => {
  showNotify({
    message: '点击任意位置关闭',
    duration: 0, // 不自动关闭
  });
  
  // 3秒后手动关闭
  setTimeout(() => {
    closeNotify();
  }, 3000);
};
</script>

🎨 通知类型

四种通知类型，就像交通信号灯一样清晰明了 🚦

import { showNotify } from 'vant';

// 主要通知 - 蓝色的信息提示 💙
showNotify({ type: 'primary', message: '主要通知内容' });

// 成功通知 - 绿色的成功反馈 💚
showNotify({ type: 'success', message: '操作成功！' });

// 危险通知 - 红色的警告信息 ❤️
showNotify({ type: 'danger', message: '操作失败！' });

// 警告通知 - 橙色的提醒信息 🧡
showNotify({ type: 'warning', message: '请注意！' });

html

<template>
  <van-cell-group>
    <van-cell is-link title="主要通知" @click="showPrimary" />
    <van-cell is-link title="成功通知" @click="showSuccess" />
    <van-cell is-link title="危险通知" @click="showDanger" />
    <van-cell is-link title="警告通知" @click="showWarning" />
  </van-cell-group>
</template>

<script setup>
import { showNotify } from 'vant';

const showPrimary = () => {
  showNotify({ type: 'primary', message: '这是主要通知 💙' });
};

const showSuccess = () => {
  showNotify({ type: 'success', message: '操作成功啦 🎉' });
};

const showDanger = () => {
  showNotify({ type: 'danger', message: '出现错误了 ⚠️' });
};

const showWarning = () => {
  showNotify({ type: 'warning', message: '请注意检查 ⚡' });
};
</script>

🎨 自定义通知

让通知变得更个性化，就像定制专属的消息卡片 🎨

import { showNotify } from 'vant';

// 自定义颜色，打造专属风格 🌈
showNotify({
  message: '自定义颜色通知',
  color: '#ad0000',
  background: '#ffe1e1',
});

// 自定义位置，从底部弹出 ⬆️
showNotify({
  message: '从底部弹出的通知',
  position: 'bottom',
});

// 自定义时长，快速闪现 ⚡
showNotify({
  message: '1秒后消失',
  duration: 1000,
});

html

<template>
  <van-cell-group>
    <van-cell is-link title="自定义颜色" @click="showCustomColor" />
    <van-cell is-link title="底部弹出" @click="showBottom" />
    <van-cell is-link title="自定义时长" @click="showCustomDuration" />
  </van-cell-group>
</template>

<script setup>
import { showNotify } from 'vant';

const showCustomColor = () => {
  showNotify({
    message: '粉色主题通知 💗',
    color: '#fff',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  });
};

const showBottom = () => {
  showNotify({
    message: '我从底部冒出来啦 👋',
    position: 'bottom',
  });
};

const showCustomDuration = () => {
  showNotify({
    message: '我只停留1秒钟 ⚡',
    duration: 1000,
  });
};
</script>

🧩 使用 Notify 组件

当需要更复杂的内容时，组件调用就像搭积木一样灵活 🧩

html

<template>
  <div>
    <van-cell is-link title="组件调用" @click="showComponentNotify" />
    
    <van-notify v-model:show="show" type="success">
      <van-icon name="bell" />
      自定义内容通知 🔔
    </van-notify>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const showComponentNotify = () => {
  show.value = true;
  
  // 2秒后自动关闭
  setTimeout(() => {
    show.value = false;
  }, 2000);
};
</script>


## 📋 API

### 🔧 方法

Vant 中导出了以下 Notify 相关的辅助函数：

| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| showNotify | 在页面顶部展示 Notify，像发射信号弹一样 🚀 | `NotifyOptions \| string` | notify 实例 |
| closeNotify | 关闭当前展示的 Notify，让消息悄然消失 ✨ | \- | `void` |
| setNotifyDefaultOptions | 修改默认配置，影响所有的 `showNotify` 调用 ⚙️ | `NotifyOptions` | `void` |
| resetNotifyDefaultOptions | 重置默认配置，恢复出厂设置 🔄 | \- | `void` |

### 🎛️ NotifyOptions

调用 `showNotify` 等方法时，支持传入以下选项：

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型，可选值为 `primary` `success` `warning`，决定通知的视觉风格 🎨 | *NotifyType* | `danger` |
| message | 展示文案，支持通过`\n`换行，消息的核心内容 📝 | *string* | \- |
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 ⏰ | *number \| string* | `3000` |
| zIndex | 将组件的 z-index 层级设置为一个固定值 📚 | *number \| string* | `2000+` |
| position | 弹出位置，可选值为 `bottom`，控制消息出现的位置 📍 | *NotifyPosition* | `top` |
| color | 字体颜色，让文字更醒目 🎨 | *string* | `white` |
| background | 背景颜色，营造视觉氛围 🌈 | *string* | \- |
| className | 自定义类名，添加个性化样式 🎭 | *string \| Array \| object* | \- |
| lockScroll | 是否锁定背景滚动，防止页面滚动干扰 🔒 | *boolean* | `false` |
| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) 🎯 | *string \| Element* | \- |
| onClick | 点击时的回调函数，响应用户交互 👆 | *(event: MouseEvent): void* | \- |
| onOpened | 完全展示后的回调函数，通知完全显示时触发 🎪 | *() => void* | \- |
| onClose | 关闭时的回调函数，通知关闭时触发 👋 | *() => void* | \- |

### 🎛️ Props

通过组件调用 `Notify` 时，支持以下 Props：

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model:show | 是否显示通知，控制通知的显示状态 👁️ | *boolean* | `false` |
| type | 类型，可选值为 `primary` `success` `warning`，决定通知的视觉风格 🎨 | *NotifyType* | `danger` |
| message | 展示文案，支持通过`\n`换行，消息的核心内容 📝 | *string* | \- |
| z-index | 将组件的 z-index 层级设置为一个固定值 📚 | *number \| string* | `2000+` |
| position | 弹出位置，可选值为 `bottom`，控制消息出现的位置 📍 | *NotifyPosition* | `top` |
| color | 字体颜色，让文字更醒目 🎨 | *string* | `white` |
| background | 背景颜色，营造视觉氛围 🌈 | *string* | \- |
| class-name | 自定义类名，添加个性化样式 🎭 | *string \| Array \| object* | \- |
| lock-scroll | 是否锁定背景滚动，防止页面滚动干扰 🔒 | *boolean* | `false` |
| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://cn.vuejs.org/api/built-in-components.html#teleport) 🎯 | *string \| Element* | \- |

### 🎪 Events

通过组件调用 `Notify` 时，支持以下事件：

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| click | 点击时的回调函数，响应用户交互 👆 | *event: MouseEvent* |
| close | 关闭时的回调函数，通知关闭时触发 👋 | \- |
| opened | 完全展示后的回调函数，通知完全显示时触发 🎪 | \- |

### 🎰 Slots

通过组件调用 `Notify` 时，支持以下插槽：

| 名称 | 说明 |
| --- | --- |
| default | 自定义内容，可以添加图标、按钮等元素 🧩 |

### 📝 类型定义

组件导出以下类型定义：

```ts
import type {
  NotifyType,
  NotifyProps,
  NotifyOptions,
  NotifyPosition,
} from 'vant';

🎨 主题定制

🎛️ 样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-notify-text-color	var(--van-white)	文字颜色 ✏️
--van-notify-padding	var(--van-padding-xs) var(--van-padding-md)	内边距 📦
--van-notify-font-size	var(--van-font-size-md)	字体大小 📝
--van-notify-line-height	var(--van-line-height-md)	行高 📐
--van-notify-primary-background	var(--van-primary-color)	主要通知背景色 💙
--van-notify-success-background	var(--van-success-color)	成功通知背景色 💚
--van-notify-danger-background	var(--van-danger-color)	危险通知背景色 ❤️
--van-notify-warning-background	var(--van-warning-color)	警告通知背景色 🧡

常见问题

引用 showNotify 时出现编译报错？

如果引用 showNotify 方法时出现以下报错，说明项目中使用了 babel-plugin-import 插件，导致代码被错误编译。

bash

These dependencies were not found: * vant/es/show-notify in ./src/xxx.js * vant/es/show-notify/style in ./src/xxx.js

Vant 从 4.0 版本开始不再支持 babel-plugin-import 插件，请参考迁移指南移除该插件。

📚 相关文档

Toast 轻提示 - 轻提示组件
Dialog 弹出框 - 弹出框组件
NoticeBar 通知栏 - 通知栏组件
Overlay 遮罩层 - 遮罩层组件

🔔 Notify 消息提示 ​

🎯 介绍 ​

📦 引入 ​

🚀 函数调用 ​

🎯 代码演示 ​

🔧 基础用法 ​

🎨 通知类型 ​

🎨 自定义通知 ​

🧩 使用 Notify 组件 ​

🎨 主题定制 ​

🎛️ 样式变量 ​

常见问题 ​

引用 showNotify 时出现编译报错？ ​

📚 相关文档 ​

🔔 Notify 消息提示

🎯 介绍

📦 引入

🚀 函数调用

🎯 代码演示

🔧 基础用法

🎨 通知类型

🎨 自定义通知

🧩 使用 Notify 组件

🎨 主题定制

🎛️ 样式变量

常见问题

引用 showNotify 时出现编译报错？

📚 相关文档