Black semi-transparent pop-up hint in the middle of the page, used for message notification, loading hint, operation result hint and other scenarios.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Toast } from 'vant';\n\nconst app = createApp();\napp.use(Toast);\nVant provides some utility functions that can quickly evoke global Toast components.
For example, calling the showToast function will render a Toast directly in the page.
import { showToast } from 'vant';\n\nshowToast('Some messages');\nUse the showToast method to display a text toast in the center of the screen.
import { showToast } from 'vant';\n\nshowToast('Some messages');\nUse the showLoadingToast method to display a loading toast. The forbidClick option can be used to disable background clicks.
import { showLoadingToast } from 'vant';\n\nshowLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n});\nUse the showSuccessToast method to display a success message, and use the showFailToast method to display a failure message.
import { showSuccessToast, showFailToast } from 'vant';\n\nshowSuccessToast('Success');\nshowFailToast('Fail');\nThe icon option allows you to customize the icon by specifying either the icon name or an image URL, which is equivalent to the name attribute of the Icon component.
import { showToast, showLoadingToast } from 'vant';\n\nshowToast({\n message: 'Custom Icon',\n icon: 'like-o',\n});\n\nshowToast({\n message: 'Custom Image',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',\n});\nThe loadingType option allows you to customize the type of loading icon.
showLoadingToast({\n message: 'Loading...',\n forbidClick: true,\n loadingType: 'spinner',\n});\nBy default, the Toast is rendered in the center of the screen. You can control the position of the Toast by using the position option.
import { showToast } from 'vant';\n\nshowToast({\n message: 'Top',\n position: 'top',\n});\n\nshowToast({\n message: 'Bottom',\n position: 'bottom',\n});\nThe wordBreak option controls how the text in the Toast is truncated when it exceeds the available space. The default value is break-all, and the optional values are break-word and normal.
import { showToast } from 'vant';\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-all',\n});\n\nshowToast({\n message: 'This message will contain a incomprehensibilities long word.',\n wordBreak: 'break-word',\n});\nWhen executing the Toast method, it returns the corresponding Toast instance. You can dynamically update the message by modifying the message property on the instance.
import { showLoadingToast, closeToast } from 'vant';\n\nconst toast = showLoadingToast({\n duration: 0,\n forbidClick: true,\n loadingType: 'spinner',\n message: '3 seconds',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n second--;\n if (second) {\n toast.message = `${second} seconds`;\n } else {\n clearInterval(timer);\n closeToast();\n }\n}, 1000);\nThe Toast is implemented as a singleton by default, which means that only one Toast can exist at a time. If you need to display multiple Toasts at the same time, you can refer to the following example:
\nimport { showToast, showSuccessToast, allowMultipleToast } from 'vant';\n\nallowMultipleToast();\n\nconst toast1 = showToast('First Toast');\nconst toast2 = showSuccessToast('Second Toast');\n\ntoast1.close();\ntoast2.close();\nYou can globally modify the default configuration of the showToast and other methods by using the setToastDefaultOptions function.
import { setToastDefaultOptions, resetToastDefaultOptions } from 'vant';\n\nsetToastDefaultOptions({ duration: 2000 });\n\nsetToastDefaultOptions('loading', { forbidClick: true });\n\nresetToastDefaultOptions();\n\nresetToastDefaultOptions('loading');\nIf you need to embed components or other custom content within the Toast, you can directly use the Toast component and customize it using the message slot. Before using it, you need to register the component using app.use or other methods.
<van-toast v-model:show="show" style="padding: 0">\n <template #message>\n <van-image :src="image" width="200" height="140" style="display: block" />\n </template>\n</van-toast>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n return { show };\n },\n};\nVant exports following Toast utility functions:
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| showToast | \nDisplay a text toast | \nToastOptions | string | \nToast instance | \n
| showLoadingToast | \nDisplay a loading toast | \nToastOptions | string | \nToast instance | \n
| showSuccessToast | \nDisplay a success toast | \nToastOptions | string | \nToast instance | \n
| showFailToast | \nDisplay a fail toast | \nToastOptions | string | \nToast instance | \n
| closeToast | \nClose the currently displayed toast | \ncloseAll: boolean | \nvoid | \n
| allowMultipleToast | \nAllow multiple toasts to be displayed as the same time | \n- | \nvoid | \n
| setToastDefaultOptions | \nModify the default configuration that affects all showToast calls. Specify the type parameter to modify the default configuration of a specific type of toast | \ntype | ToastOptions | \nvoid | \n
| resetToastDefaultOptions | \nReset the default configuration that affects all showToast calls. Specify the type parameter to reset the default configuration of a specific type of toast | \ntype | \nvoid | \n
When calling the showToast and other related methods, the following options are supported:
| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| type | \nCan be set to loading success fail html | \nToastType | \ntext | \n
| position | \nCan be set to top middle bottom | \nToastPosition | \nmiddle | \n
| message | \nMessage | \nstring | \n\'\' | \n
| wordBreak | \nCan be set to normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
| icon | \nCustom icon | \nstring | \n- | \n
| iconSize | \nCustom icon size | \nnumber | string | \n36px | \n
| iconPrefix | \nIcon className prefix | \nstring | \nvan-icon | \n
| overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
| forbidClick | \nWhether to forbid click background | \nboolean | \nfalse | \n
| closeOnClick | \nWhether to close after clicked | \nboolean | \nfalse | \n
| closeOnClickOverlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
| loadingType | \nLoading icon type, can be set to spinner | \nstring | \ncircular | \n
| duration | \nToast duration(ms), won\'t disappear if value is 0 | \nnumber | \n2000 | \n
| className | \nCustom className | \nstring | Array | object | \n- | \n
| overlayClass | \nCustom overlay class | \nstring | Array | object | \n- | \n
| overlayStyle | \nCustom overlay style | \nobject | \n- | \n
| transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
| teleport | \nSpecifies a target element where Toast will be mounted | \nstring | Element | \nbody | \n
| zIndex | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
| onClose | \nCallback function after close | \nFunction | \n- | \n
| onOpened | \nCallback function after opened | \nFunction | \n- | \n
When using Toast as a component, the following props are supported:
| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model:show | \nWhether to show toast | \nboolean | \nfalse | \n
| type | \nCan be set to loading success fail html | \nToastType | \ntext | \n
| position | \nCan be set to top middle bottom | \nToastPosition | \nmiddle | \n
| message | \nMessage | \nstring | \n\'\' | \n
| word-break | \nCan be set to normal break-all break-word | \nToastWordBreak | \n\'break-all\' | \n
| icon | \nCustom icon | \nstring | \n- | \n
| icon-size | \nCustom icon size | \nnumber | string | \n36px | \n
| icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
| overlay | \nWhether to show overlay | \nboolean | \nfalse | \n
| forbid-click | \nWhether to forbid click background | \nboolean | \nfalse | \n
| close-on-click | \nWhether to close after clicked | \nboolean | \nfalse | \n
| close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \nfalse | \n
| loading-type | \nLoading icon type, can be set to spinner | \nstring | \ncircular | \n
| duration | \nToast duration(ms), won\'t disappear if value is 0 | \nnumber | \n2000 | \n
| class-name | \nCustom className | \nstring | Array | object | \n- | \n
| overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
| overlay-style | \nCustom overlay style | \nobject | \n- | \n
| transition | \nTransition, equivalent to name prop of transition | \nstring | \nvan-fade | \n
| teleport | \nSpecifies a target element where Toast will be mounted | \nstring | Element | \nbody | \n
| z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
When using Toast as a component, the following events are supported:
| Event | \nDescription | \nParameters | \n
|---|---|---|
| close | \nCallback function after close | \n- | \n
| opened | \nCallback function after opened | \n- | \n
You can use following slots when using Toast component:
| Name | \nDescription | \n
|---|---|
| message | \nCustom message | \n
The component exports the following type definitions:
\nimport type {\n ToastType,\n ToastProps,\n ToastOptions,\n ToastPosition,\n ToastWordBreak,\n ToastWrapperInstance,\n} from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-toast-max-width | \n70% | \n- | \n
| --van-toast-font-size | \nvar(--van-font-size-md) | \n- | \n
| --van-toast-text-color | \nvar(--van-white) | \n- | \n
| --van-toast-loading-icon-color | \nvar(--van-white) | \n- | \n
| --van-toast-line-height | \nvar(--van-line-height-md) | \n- | \n
| --van-toast-radius | \nvar(--van-radius-lg) | \n- | \n
| --van-toast-background | \nfade(var(--van-black), 70%) | \n- | \n
| --van-toast-icon-size | \n36px | \n- | \n
| --van-toast-text-min-width | \n96px | \n- | \n
| --van-toast-text-padding | \nvar(--van-padding-xs) var(--van-padding-sm) | \n- | \n
| --van-toast-default-padding | \nvar(--van-padding-md) | \n- | \n
| --van-toast-default-width | \n88px | \n- | \n
| --van-toast-default-min-height | \n88px | \n- | \n
| --van-toast-position-top-distance | \n20% | \n- | \n
| --van-toast-position-bottom-distance | \n20% | \n- | \n