Vant Notify message tip

Introduced

import Vue from 'vue';
import { Notify } from 'vant';

Vue.use(Notify);

Code demo

Basic usage

Notify('通知内容');

The type of notification

The four notification types, primary, success, warning, and danger, are supported, defaulting to danger

// 主要通知
Notify({ type: 'primary', message: '通知内容' });

// 成功通知
Notify({ type: 'success', message: '通知内容' });

// 危险通知
Notify({ type: 'danger', message: '通知内容' });

// 警告通知
Notify({ type: 'warning', message: '通知内容' });

Custom notifications

Customize the color and presentation time of message notifications

Notify({
  message: '自定义颜色',
  color: '#ad0000',
  background: '#ffe1e1'
});

Notify({
  message: '自定义时长',
  duration: 1000
});

In-component calls

When the Notify component is introduced, the method is automatically mounted on Vue'$notify, making it easy to call within the component.

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

Api

Method

Options