Notify 消息提示

介绍

在页面顶部展示消息提示，支持组件调用和函数调用两种方式。

引入

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

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

函数调用

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

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

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

代码演示

基础用法

  1. import { showNotify, closeNotify } from 'vant';
  3. // 3 秒后自动关闭
  4. showNotify('通知内容');
  6. // 主动关闭
  7. closeNotify();

通知类型

支持 primary、success、warning、danger 四种通知类型，默认为 danger。

  1. import { showNotify } from 'vant';
  3. // 主要通知
  4. showNotify({ type: 'primary', message: '通知内容' });
  6. // 成功通知
  7. showNotify({ type: 'success', message: '通知内容' });
  9. // 危险通知
  10. showNotify({ type: 'danger', message: '通知内容' });
  12. // 警告通知
  13. showNotify({ type: 'warning', message: '通知内容' });

自定义通知

自定义消息通知的颜色、位置和展示时长。

  1. import { showNotify } from 'vant';
  3. showNotify({
  4.   message: '自定义颜色',
  5.   color: '#ad0000',
  6.   background: '#ffe1e1',
  7. });
  9. showNotify({
  10.   message: '自定义位置',
  11.   position: 'bottom',
  12. });
  14. showNotify({
  15.   message: '自定义时长',
  16.   duration: 1000,
  17. });

使用 Notify 组件

如果需要在 Notify 内嵌入组件或其他自定义内容，可以直接使用 Notify 组件，并使用默认插槽进行定制。使用前需要通过 app.use 等方式注册组件。

  1. <van-button type="primary" text="组件调用" @click="showNotify" />
  2. <van-notify v-model:show="show" type="success">
  3.   <van-icon name="bell" style="margin-right: 4px;" />
  4.   <span>通知内容</span>
  5. </van-notify>
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const show = ref(false);
  7.     const showNotify = () => {
  8.       show.value = true;
  9.       setTimeout(() => {
  10.         show.value = false;
  11.       }, 2000);
  12.     };
  14.     return {
  15.       show,
  16.       showNotify,
  17.     };
  18.   },
  19. };

API

方法

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

方法名说明参数返回值
showNotify展示提示NotifyOptions | stringnotify 实例
closeNotify关闭提示-void
setNotifyDefaultOptions修改默认配置，影响所有的 showNotify 调用NotifyOptionsvoid
resetNotifyDefaultOptions重置默认配置，影响所有的 showNotify 调用-void

NotifyOptions

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

参数说明类型默认值
type类型，可选值为 primary success warningNotifyTypedanger
message展示文案，支持通过\n换行string-
duration展示时长(ms)，值为 0 时，notify 不会消失number | string3000
z-index将组件的 z-index 层级设置为一个固定值number | string2000+
position v3.4.0弹出位置，可选值为 bottomNotifyPositiontop
color字体颜色stringwhite
background背景颜色string-
className自定义类名string | Array | object-
lockScroll v3.0.7是否锁定背景滚动booleanfalse
onClick点击时的回调函数(event: MouseEvent): void-
onOpened完全展示后的回调函数() => void-
onClose关闭时的回调函数() => void-

类型定义

组件导出以下类型定义：

  1. import type {
  2.   NotifyType,
  3.   NotifyProps,
  4.   NotifyOptions,
  5.   NotifyPosition,
  6. } from 'vant';

主题定制

样式变量

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

名称默认值描述
—van-notify-text-colorvar(—van-white)-
—van-notify-paddingvar(—van-padding-xs) var(—van-padding-md)-
—van-notify-font-sizevar(—van-font-size-md)-
—van-notify-line-heightvar(—van-line-height-md)-
—van-notify-primary-backgroundvar(—van-primary-color)-
—van-notify-success-backgroundvar(—van-success-color)-
—van-notify-danger-backgroundvar(—van-danger-color)-
—van-notify-warning-backgroundvar(—van-warning-color)-

常见问题

引用 showNotify 时出现编译报错？

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

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

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

Notify 消息通知 - 图1