Toast 轻提示

引入

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

手动引入样式

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

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

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

文字提示

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

加载提示

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

  1.   message: '加载中...',
  2.   forbidClick: true,
  3. });

成功/失败提示

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

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

通过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. export default {
  2.   mounted() {
  3.     this.$toast('提示文案');
  4.   },
  5. };

单例模式

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

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

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

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

方法

ToastOptions 数据结构

类型定义

组件导出以下类型定义：

样式变量