在頁面中間彈出黑色半透明提示,用于消息通知、加載提示、操作結(jié)果提示等場景。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Toast } from 'vant';
const app = createApp();
app.use(Toast);
Toast('提示內(nèi)容');
使用 Toast.loading 方法展示加載提示,通過 forbidClick 屬性可以禁用背景點擊。
Toast.loading({
message: '加載中...',
forbidClick: true,
});
使用 Toast.success 方法展示成功提示,使用 Toast.fail 方法展示失敗提示。
Toast.success('成功文案');
Toast.fail('失敗文案');
通過 icon 選項可以自定義圖標(biāo),支持傳入圖標(biāo)名稱或圖片鏈接,通過loadingType 屬性可以自定義加載圖標(biāo)類型。
Toast({
message: '自定義圖標(biāo)',
icon: 'like-o',
});
Toast({
message: '自定義圖片',
icon: 'https://img.yzcdn.cn/vant/logo.png',
});
Toast.loading({
message: '加載中...',
forbidClick: true,
loadingType: 'spinner',
});
Toast 默認(rèn)渲染在屏幕正中位置,通過 position 屬性可以控制 Toast 展示的位置。
Toast({
message: '頂部展示',
position: 'top',
});
Toast({
message: '底部展示',
position: 'bottom',
});
執(zhí)行 Toast 方法時會返回對應(yīng)的 Toast 實例,通過修改實例上的 message 屬性可以實現(xiàn)動態(tài)更新提示的效果。
const toast = Toast.loading({
duration: 0,
forbidClick: true,
message: '倒計時 3 秒',
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `倒計時 ${second} 秒`;
} else {
clearInterval(timer);
Toast.clear();
}
}, 1000);
通過 app.use 全局注冊 Toast 組件后,會自動在 app 的所有子組件上掛載 $toast 方法,便于在組件內(nèi)調(diào)用。
export default {
mounted() {
this.$toast('提示文案');
},
};
Tips: 由于 setup 選項中無法訪問 this,因此不能使用上述方式,請通過 import 引入。
Toast 默認(rèn)采用單例模式,即同一時間只會存在一個 Toast,如果需要在同一時間彈出多個 Toast,可以參考下面的示例:
Toast.allowMultiple();
const toast1 = Toast('第一個 Toast');
const toast2 = Toast.success('第二個 Toast');
toast1.clear();
toast2.clear();
通過 Toast.setDefaultOptions 函數(shù)可以全局修改 Toast 的默認(rèn)配置。
Toast.setDefaultOptions({ duration: 2000 });
Toast.setDefaultOptions('loading', { forbidClick: true });
Toast.resetDefaultOptions();
Toast.resetDefaultOptions('loading');
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
Toast | 展示提示 | options | message
|
toast 實例 |
Toast.loading | 展示加載提示 | options | message
|
toast 實例 |
Toast.success | 展示成功提示 | options | message
|
toast 實例 |
Toast.fail | 展示失敗提示 | options | message
|
toast 實例 |
Toast.clear | 關(guān)閉提示 | clearAll: boolean
|
void
|
Toast.allowMultiple | 允許同時存在多個 Toast | - | void
|
Toast.setDefaultOptions | 修改默認(rèn)配置,對所有 Toast 生效。
傳入 type 可以修改指定類型的默認(rèn)配置 |
type | options
|
void
|
Toast.resetDefaultOptions | 重置默認(rèn)配置,對所有 Toast 生效。
傳入 type 可以重置指定類型的默認(rèn)配置 |
type
|
void
|
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
type | 提示類型,可選值為 loading success
fail html
|
string | text
|
position | 位置,可選值為 top bottom
|
string | middle
|
message | 文本內(nèi)容,支持通過\n 換行 |
string | ''
|
icon | 自定義圖標(biāo),支持傳入圖標(biāo)名稱或圖片鏈接 | string | - |
iconSize | 圖標(biāo)大小,如 20px 2em ,默認(rèn)單位為 px
|
number | string | 36px
|
iconPrefix | 圖標(biāo)類名前綴,同 Icon 組件的 class-prefix 屬性 | string | van-icon
|
overlay | 是否顯示背景遮罩層 | boolean | false
|
forbidClick | 是否禁止背景點擊 | boolean | false
|
closeOnClick | 是否在點擊后關(guān)閉 | boolean | false
|
closeOnClickOverlay | 是否在點擊遮罩層后關(guān)閉 | boolean | false
|
loadingType | 加載圖標(biāo)類型, 可選值為 spinner
|
string | circular
|
duration | 展示時長(ms),值為 0 時,toast 不會消失 | number | 2000
|
className | 自定義類名 | string | Array | object | - |
overlayClass v3.0.4
|
自定義遮罩層類名 | string | Array | object | - |
overlayStyle v3.0.4
|
自定義遮罩層樣式 | object | - |
onOpened | 完全展示后的回調(diào)函數(shù) | Function | - |
onClose | 關(guān)閉時的回調(diào)函數(shù) | Function | - |
transition | 動畫類名,等價于 transition 的name 屬性 |
string | van-fade
|
teleport | 指定掛載的節(jié)點,用法示例 | string | Element | body
|
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-toast-max-width | 70% | - |
--van-toast-font-size | var(--van-font-size-md) | - |
--van-toast-text-color | var(--van-white) | - |
--van-toast-loading-icon-color | var(--van-white) | - |
--van-toast-line-height | var(--van-line-height-md) | - |
--van-toast-border-radius | var(--van-border-radius-lg) | - |
--van-toast-background-color | fade(var(--van-black), 70%) | - |
--van-toast-icon-size | 36px | - |
--van-toast-text-min-width | 96px | - |
--van-toast-text-padding | var(--van-padding-xs) var(--van-padding-sm) | - |
--van-toast-default-padding | var(--van-padding-md) | - |
--van-toast-default-width | 88px | - |
--van-toast-default-min-height | 88px | - |
--van-toast-position-top-distance | 20% | - |
--van-toast-position-bottom-distance | 20% | - |
更多建議: