Notify 消息提示

函数调用

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

组件调用

通过组件调用 Notify 时，可以通过下面的方式进行注册：

  2. import { Notify } from 'vant';
  4. // 全局注册
  5. const app = createApp();
  6. app.use(Notify);
  8. // 局部注册
  9. export default {
  10.   components: {
  11.     [Notify.Component.name]: Notify.Component,
  12.   },
  13. };

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

  1.   const VanNotify = Notify.Component;
  2. </script>
  4. <template>
  5.   <!-- 中划线命名 -->
  6.   <van-notify />
  7.   <!-- 也支持大驼峰命名 -->
  8.   <VanNotify>
  9. </template>

基础用法

  1. // 主要通知
  2. Notify({ type: 'primary', message: '通知内容' });
  5. Notify({ type: 'success', message: '通知内容' });
  7. // 危险通知
  8. Notify({ type: 'danger', message: '通知内容' });
  10. // 警告通知
  11. Notify({ type: 'warning', message: '通知内容' });

自定义通知

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

  1. Notify({
  2.   message: '自定义颜色',
  3.   color: '#ad0000',
  4.   background: '#ffe1e1',
  5. });
  7. Notify({
  8.   message: '自定义位置',
  9. });
  11. Notify({
  12.   message: '自定义时长',
  13.   duration: 1000,
  14. });

全局方法

通过 app.use 全局注册 Notify 组件后，会自动在 app 的所有子组件上挂载 $notify 方法，便于在组件内调用。

组件调用

  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';
  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. };

Options

类型定义

组件导出以下类型定义：

样式变量

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