Vant3 Notify 消息提示

介紹

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

實(shí)例演示

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

Notify 是一個(gè)函數(shù)，調(diào)用后會(huì)直接在頁(yè)面中彈出相應(yīng)的消息提示。

import { Notify } from 'vant';

Notify('通知內(nèi)容');

組件調(diào)用

通過(guò)組件調(diào)用 Notify 時(shí)，可以通過(guò)下面的方式進(jìn)行注冊(cè)：

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

// 全局注冊(cè)
const app = createApp();
app.use(Notify);

// 局部注冊(cè)
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
};

代碼演示

基礎(chǔ)用法

Notify('通知內(nèi)容');

通知類型

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

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

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

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

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

自定義通知

自定義消息通知的顏色和展示時(shí)長(zhǎng)。

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

Notify({
  message: '自定義時(shí)長(zhǎng)',
  duration: 1000,
});

全局方法

通過(guò) app.use 全局注冊(cè) Notify 組件后，會(huì)自動(dòng)在 app 的所有子組件上掛載 $notify 方法，便于在組件內(nèi)調(diào)用。

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

Tips: 由于 setup 選項(xiàng)中無(wú)法訪問(wèn) this，因此不能使用上述方式，請(qǐng)通過(guò) import 引入。

組件調(diào)用

如果需要在 Notify 內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式。

<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

方法

Options

樣式變量

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