Notify 消息提示

函数调用

Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。

手动引入样式

Notify 组件是以函数形式提供的，如果项目中使用 插件来自动引入组件样式，则无法正确识别 Notify 组件，因此需要手动引入 Notify 组件的样式：

import 'vant/es/notify/style';

你可以在项目的入口文件或公共模块中引入 Notify 组件的样式，这样在业务代码中使用 Notify 时，便不再需要重复引入样式了。

组件调用

import { createApp } from 'vue';
// 全局注册
const app = createApp();
app.use(Notify);
// 局部注册
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
};

在 script setup 中，可以通过以下方式使用：

基础用法

Notify('通知内容');

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

Notify({ type: 'primary', message: '通知内容' });
// 成功通知
Notify({ type: 'success', message: '通知内容' });
Notify({ type: 'danger', message: '通知内容' });
// 警告通知
Notify({ type: 'warning', message: '通知内容' });

自定义通知

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

全局方法

export default {
  mounted() {
    this.$notify('提示文案');
  },
};

组件调用

如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-button type="primary" text="组件调用" @click="showNotify" />
<van-notify v-model:show="show" type="success">
  <van-icon name="bell" style="margin-right: 4px;" />
  <span>通知内容</span>

Options

类型定义

组件导出以下类型定义：

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

样式变量