Toast 轻提示

介绍

在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { Toast } from 'vant';
  3. const app = createApp();
  4. app.use(Toast);

手动引入样式

Toast 组件是以函数形式提供的,如果项目中使用 unplugin-vue-components 插件来自动引入组件样式,则无法正确识别 Toast 组件,因此需要手动引入 Toast 组件的样式:

  1. import 'vant/es/toast/style';

你可以在项目的入口文件或公共模块中引入 Toast 组件的样式,这样在业务代码中使用 Toast 时,便不再需要重复引入样式了。

代码演示

文字提示

  1. Toast('提示内容');

加载提示

使用 Toast.loading 方法展示加载提示,通过 forbidClick 属性可以禁用背景点击。

  1. Toast.loading({
  2. message: '加载中...',
  3. forbidClick: true,
  4. });

成功/失败提示

使用 Toast.success 方法展示成功提示,使用 Toast.fail 方法展示失败提示。

  1. Toast.success('成功文案');
  2. Toast.fail('失败文案');

自定义图标

通过 icon 选项可以自定义图标,支持传入图标名称或图片链接,等同于 Icon 组件的 name 属性

  1. Toast({
  2. message: '自定义图标',
  3. icon: 'like-o',
  4. });
  5. Toast({
  6. message: '自定义图片',
  7. icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
  8. });

通过loadingType 属性可以自定义加载图标类型。

  1. Toast.loading({
  2. message: '加载中...',
  3. forbidClick: true,
  4. loadingType: 'spinner',
  5. });

自定义位置

Toast 默认渲染在屏幕正中位置,通过 position 属性可以控制 Toast 展示的位置。

  1. Toast({
  2. message: '顶部展示',
  3. position: 'top',
  4. });
  5. Toast({
  6. message: '底部展示',
  7. position: 'bottom',
  8. });

动态更新提示

执行 Toast 方法时会返回对应的 Toast 实例,通过修改实例上的 message 属性可以实现动态更新提示的效果。

  1. const toast = Toast.loading({
  2. duration: 0,
  3. forbidClick: true,
  4. message: '倒计时 3 秒',
  5. });
  6. let second = 3;
  7. const timer = setInterval(() => {
  8. second--;
  9. if (second) {
  10. toast.message = `倒计时 ${second} 秒`;
  11. } else {
  12. clearInterval(timer);
  13. Toast.clear();
  14. }
  15. }, 1000);

全局方法

通过 app.use 全局注册 Toast 组件后,会自动在 app 的所有子组件上挂载 $toast 方法,便于在组件内调用。

  1. export default {
  2. mounted() {
  3. this.$toast('提示文案');
  4. },
  5. };

Tips: 由于 setup 选项中无法访问 this,因此不能使用上述方式,请通过 import 引入。

单例模式

Toast 默认采用单例模式,即同一时间只会存在一个 Toast,如果需要在同一时间弹出多个 Toast,可以参考下面的示例:

  1. Toast.allowMultiple();
  2. const toast1 = Toast('第一个 Toast');
  3. const toast2 = Toast.success('第二个 Toast');
  4. toast1.clear();
  5. toast2.clear();

修改默认配置

通过 Toast.setDefaultOptions 函数可以全局修改 Toast 的默认配置。

  1. Toast.setDefaultOptions({ duration: 2000 });
  2. Toast.setDefaultOptions('loading', { forbidClick: true });
  3. Toast.resetDefaultOptions();
  4. Toast.resetDefaultOptions('loading');

API

方法

方法名说明参数返回值
Toast展示提示options | messagetoast 实例
Toast.loading展示加载提示options | messagetoast 实例
Toast.success展示成功提示options | messagetoast 实例
Toast.fail展示失败提示options | messagetoast 实例
Toast.clear关闭提示clearAll: booleanvoid
Toast.allowMultiple允许同时存在多个 Toast-void
Toast.setDefaultOptions修改默认配置,对所有 Toast 生效。
传入 type 可以修改指定类型的默认配置
type | optionsvoid
Toast.resetDefaultOptions重置默认配置,对所有 Toast 生效。
传入 type 可以重置指定类型的默认配置
typevoid

ToastOptions 数据结构

参数说明类型默认值
type提示类型,可选值为 loading success
fail html
ToastTypetext
position位置,可选值为 top bottomToastPositionmiddle
message文本内容,支持通过\n换行string‘’
icon自定义图标,支持传入图标名称或图片链接,等同于 Icon 组件的 name 属性string-
iconSize图标大小,如 20px 2em,默认单位为 pxnumber | string36px
iconPrefix图标类名前缀,等同于 Icon 组件的 class-prefix 属性stringvan-icon
overlay是否显示背景遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
closeOnClick是否在点击后关闭booleanfalse
closeOnClickOverlay是否在点击遮罩层后关闭booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
duration展示时长(ms),值为 0 时,toast 不会消失number2000
className自定义类名string | Array | object-
overlayClass v3.0.4自定义遮罩层类名string | Array | object-
overlayStyle v3.0.4自定义遮罩层样式object-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
transition动画类名,等价于 transitionname属性stringvan-fade
teleport指定挂载的节点,等同于 Teleport 组件的 to 属性string | Elementbody

类型定义

组件导出以下类型定义:

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

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
—van-toast-max-width70%-
—van-toast-font-sizevar(—van-font-size-md)-
—van-toast-text-colorvar(—van-white)-
—van-toast-loading-icon-colorvar(—van-white)-
—van-toast-line-heightvar(—van-line-height-md)-
—van-toast-border-radiusvar(—van-border-radius-lg)-
—van-toast-background-colorfade(var(—van-black), 70%)-
—van-toast-icon-size36px-
—van-toast-text-min-width96px-
—van-toast-text-paddingvar(—van-padding-xs) var(—van-padding-sm)-
—van-toast-default-paddingvar(—van-padding-md)-
—van-toast-default-width88px-
—van-toast-default-min-height88px-
—van-toast-position-top-distance20%-
—van-toast-position-bottom-distance20%-

Toast 轻提示 - 图1