Vant4 Notify 消息通知

介紹

在頁面頂部展示消息提示，支持組件調(diào)用和函數(shù)調(diào)用兩種方式。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

const app = createApp();
app.use(Notify);

函數(shù)調(diào)用

為了便于使用 ?Notify?，Vant 提供了一系列輔助函數(shù)，通過輔助函數(shù)可以快速喚起全局的消息提示。

比如使用 ?showNotify ?函數(shù)，調(diào)用后會(huì)直接在頁面中渲染對應(yīng)的提示。

import { showNotify } from 'vant';

showNotify({ message: '提示' });

代碼演示

基礎(chǔ)用法

import { showNotify, closeNotify } from 'vant';

// 3 秒后自動(dòng)關(guān)閉
showNotify('通知內(nèi)容');

// 主動(dòng)關(guān)閉
closeNotify();

通知類型

支持 ?primary?、?success?、?warning?、?danger? 四種通知類型，默認(rèn)為 ?danger?。

import { showNotify } from 'vant';

// 主要通知
showNotify({ type: 'primary', message: '通知內(nèi)容' });

// 成功通知
showNotify({ type: 'success', message: '通知內(nèi)容' });

// 危險(xiǎn)通知
showNotify({ type: 'danger', message: '通知內(nèi)容' });

// 警告通知
showNotify({ type: 'warning', message: '通知內(nèi)容' });

自定義通知

自定義消息通知的顏色、位置和展示時(shí)長。

import { showNotify } from 'vant';

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

showNotify({
  message: '自定義位置',
  position: 'bottom',
});

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

使用 Notify 組件

如果需要在 Notify 內(nèi)嵌入組件或其他自定義內(nèi)容，可以直接使用 Notify 組件，并使用默認(rèn)插槽進(jìn)行定制。使用前需要通過 ?app.use? 等方式注冊組件。

<van-button type="primary" text="組件調(diào)用" @click="showNotify" />
<van-notify v-model:show="show" type="success">
  <van-icon name="bell" style="margin-right: 4px;" />
  <span>通知內(nèi)容</span>
</van-notify>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);

    const showNotify = () => {
      show.value = true;
      setTimeout(() => {
        show.value = false;
      }, 2000);
    };

    return {
      show,
      showNotify,
    };
  },
};

API

方法

Vant 中導(dǎo)出了以下 Notify 相關(guān)的輔助函數(shù)：

NotifyOptions

調(diào)用 ?showNotify? 等方法時(shí)，支持傳入以下選項(xiàng)：

類型定義

組件導(dǎo)出以下類型定義：

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

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。

常見問題

引用 showNotify 時(shí)出現(xiàn)編譯報(bào)錯(cuò)？

如果引用 ?showNotify? 方法時(shí)出現(xiàn)以下報(bào)錯(cuò)，說明項(xiàng)目中使用了 ?babel-plugin-import? 插件，導(dǎo)致代碼被錯(cuò)誤編譯。

These dependencies were not found:

* vant/es/show-notify in ./src/xxx.js
* vant/es/show-notify/style in ./src/xxx.js

Vant 從 4.0 版本開始不再支持 ?babel-plugin-import? 插件，請參考 遷移指南 移除該插件。