Vant4 Toast 輕提示

介紹

在頁面中間彈出黑色半透明提示，用于消息通知、加載提示、操作結(jié)果提示等場景。

引入

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

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

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

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

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

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

import { showToast } from 'vant';

showToast('提示內(nèi)容');

代碼演示

文字提示

import { showToast } from 'vant';

showToast('提示內(nèi)容');

加載提示

使用 ?showLoadingToast? 方法展示加載提示，通過 ?forbidClick? 選項(xiàng)可以禁用背景點(diǎn)擊。

import { showLoadingToast } from 'vant';

showLoadingToast({
  message: '加載中...',
  forbidClick: true,
});

成功/失敗提示

使用 ?showSuccessToast? 方法展示成功提示，使用 ?showFailToast? 方法展示失敗提示。

import { showSuccessToast, showFailToast } from 'vant';

showSuccessToast('成功文案');
showFailToast('失敗文案');

自定義圖標(biāo)

通過 ?icon? 選項(xiàng)可以自定義圖標(biāo)，支持傳入圖標(biāo)名稱或圖片鏈接，等同于 Icon 組件的 name 屬性。

import { showToast } from 'vant';

showToast({
  message: '自定義圖標(biāo)',
  icon: 'like-o',
});

showToast({
  message: '自定義圖片',
  icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
});

通過?loadingType? 屬性可以自定義加載圖標(biāo)類型。

import { showLoadingToast } from 'vant';

showLoadingToast({
  message: '加載中...',
  forbidClick: true,
  loadingType: 'spinner',
});

自定義位置

Toast 默認(rèn)渲染在屏幕正中位置，通過 ?position? 屬性可以控制 Toast 展示的位置。

import { showToast } from 'vant';

showToast({
  message: '頂部展示',
  position: 'top',
});

showToast({
  message: '底部展示',
  position: 'bottom',
});

文字換行方式

通過 ?wordBreak? 選擇可以控制 Toast 中的文字過長時的截?cái)喾绞剑J(rèn)值為 ?break-all?，可選值為 ?break-word? 和 ?normal?。

import { showToast } from 'vant';

// 換行時截?cái)鄦卧~
showToast({
  message: 'This message will contain a incomprehensibilities long word.',
  wordBreak: 'break-all',
});

// 換行時不截?cái)鄦卧~
showToast({
  message: 'This message will contain a incomprehensibilities long word.',
  wordBreak: 'break-word',
});

動態(tài)更新提示

執(zhí)行 Toast 方法時會返回對應(yīng)的 Toast 實(shí)例，通過修改實(shí)例上的 ?message? 屬性可以實(shí)現(xiàn)動態(tài)更新提示的效果。

import { showLoadingToast, closeToast } from 'vant';

const toast = showLoadingToast({
  duration: 0,
  forbidClick: true,
  message: '倒計(jì)時 3 秒',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = `倒計(jì)時 ${second} 秒`;
  } else {
    clearInterval(timer);
    closeToast();
  }
}, 1000);

單例模式

Toast 默認(rèn)采用單例模式，即同一時間只會存在一個 Toast，如果需要在同一時間彈出多個 Toast，可以參考下面的示例：

import { showToast, showSuccessToast, allowMultipleToast } from 'vant';

allowMultipleToast();

const toast1 = showToast('第一個 Toast');
const toast2 = showSuccessToast('第二個 Toast');

toast1.close();
toast2.close();

修改默認(rèn)配置

通過 ?setToastDefaultOptions? 函數(shù)可以全局修改 ?showToast? 等方法的默認(rèn)配置。

import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';

setToastDefaultOptions({ duration: 2000 });

setToastDefaultOptions('loading', { forbidClick: true });

resetToastDefaultOptions();

resetToastDefaultOptions('loading');

使用 Toast 組件

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

<van-toast v-model:show="show" style="padding: 0">
  <template #message>
    <van-image :src="image" width="200" height="140" style="display: block" />
  </template>
</van-toast>

import { ref } from 'vue';

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

API

方法

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

ToastOptions 數(shù)據(jù)結(jié)構(gòu)

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

Slots

使用 ?Toast? 組件時，支持以下插槽：

類型定義

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

import type {
  ToastType,
  ToastProps,
  ToastOptions,
  ToastPosition,
  ToastWordBreak,
} from 'vant';

主題定制

樣式變量

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

常見問題

引用 showToast 時出現(xiàn)編譯報(bào)錯？

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

These dependencies were not found:

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

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