Toast 轻提示

介绍

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

引入

  1. import { createApp } from 'vue';
  2. import { Toast } from 'vant';
  3. const app = createApp();
  4. app.use(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 选项可以自定义图标,支持传入图标名称或图片链接,通过loadingType 属性可以自定义加载图标类型。

  1. Toast({
  2. message: '自定义图标',
  3. icon: 'like-o',
  4. });
  5. Toast({
  6. message: '自定义图片',
  7. icon: 'https://img.yzcdn.cn/vant/logo.png',
  8. });
  9. Toast.loading({
  10. message: '加载中...',
  11. forbidClick: true,
  12. loadingType: 'spinner',
  13. });

自定义位置

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. };

单例模式

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

Options

| 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | —- | | type | 提示类型,可选值为 loading success
fail html | string | text | | position | 位置,可选值为 top bottom | string | middle | | message | 文本内容,支持通过\n换行 | string | '' | - | | icon | 自定义图标,支持传入图标名称或图片链接 | string | - | | iconPrefix | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | van-icon | | overlay | 是否显示背景遮罩层 | boolean | false | | forbidClick | 是否禁止背景点击 | boolean | false | | closeOnClick | 是否在点击后关闭 | boolean | false | | closeOnClickOverlay | 是否在点击遮罩层后关闭 | boolean | false | | loadingType | 加载图标类型, 可选值为 spinner | string | circular | | duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 | | className | 自定义类名 | any | - | | onOpened | 完全展示后的回调函数 | Function | - | | onClose | 关闭时的回调函数 | Function | - | | transition | 动画类名,等价于 transtionname属性 | string | van-fade | | teleport | 指定挂载的节点,用法示例 | string | Element | body |

样式变量

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

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

Toast 轻提示 - 图1