Vant Notify 消息提示

引入

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

Vue.use(Notify);

代碼演示

基礎用法

Notify('通知內容');

通知類型

支持primary、success、warning、danger四種通知類型，默認為danger

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

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

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

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

自定義通知

自定義消息通知的顏色和展示時長

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

Notify({
  message: '自定義時長',
  duration: 1000
});

組件內調用

引入 Notify 組件后，會自動在 Vue 的 prototype 上掛載 $notify 方法，便于在組件內調用。

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

API

方法

Options