vant-Toast 轻提示

介绍

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

如果在html使用cdn引入js和css使用，则需要在前面加vant.

如：

引入

代码演示

文字提示

加载提示

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

成功/失败提示

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

自定义图标

通过 `icon` 选项可以自定义图标，支持传入

图标名称

或图片链接，通过`loadingType` 属性可以自定义加载图标类型。

自定义位置

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

动态更新提示

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

全局方法

引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 `$toast` 方法，便于在组件内调用。

单例模式

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

修改默认配置

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

API

方法

Options

样式变量

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

主题定制

。