Notify 消息提示

函数调用

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

组件调用

通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：

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

通知类型

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

自定义通知

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

引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。

  1. export default {
  2.     this.$notify('提示文案');
  3.   },
  4. };

组件调用

  1. export default {
  2.   data() {
  3.     return {
  4.       show: false,
  5.     };
  6.   },
  7.   methods: {
  8.     showNotify() {
  9.       this.show = true;
  10.       setTimeout(() => {
  11.         this.show = false;
  12.       }, 2000);
  14.   },
  15. };

API

方法

样式变量

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