介绍
在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
如果在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
方法
方法名 | 说明 | 参数 | 返回值 | |
---|---|---|---|---|
Toast | 展示提示 | options、message | toast 实例 | |
Toast.loading | 展示加载提示 | options、message | toast 实例 | |
Toast.success | 展示成功提示 | options、message | toast 实例 | |
Toast.fail | 展示失败提示 | options、message | toast 实例 | |
Toast.clear | 关闭提示 | clearAll: boolean | void | |
Toast.allowMultiple | 允许同时存在多个 Toast | - | void | |
Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效。传入 type 可以修改指定类型的默认配置 | type、options | void | |
Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效。传入 type 可以重置指定类型的默认配置 | type | void |
Options
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
type | 提示类型,可选值为 loading success fail html | string | text | |
position | 位置,可选值为 top bottom | string | middle | |
message | 文本内容,支持通过\n 换行 | string | '' | |
icon | 自定义图标,支持传入[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | - | |
iconPrefix | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](https://youzan.github.io/vant/v2/#/zh-CN/icon#props) | string | van-icon | |
overlay | 是否显示背景遮罩层 | boolean | false | |
forbidClick | 是否禁止背景点击 | boolean | false | |
closeOnClick | 是否在点击后关闭 | boolean | false | |
closeOnClickOverlay | 是否在点击遮罩层后关闭 | boolean | false | |
loadingType | [加载图标类型](https://youzan.github.io/vant/v2/#/zh-CN/loading), 可选值为 spinner | string | circular | |
duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 | |
className | 自定义类名 | any | - | |
onOpened | 完全展示后的回调函数 | Function | - | |
onClose | 关闭时的回调函数 | Function | - | |
transition | 动画类名,等价于 [transition](https://cn.vuejs.org/v2/api/index.html#transition) 的name 属性 | string | van-fade | |
getContainer | 指定挂载的节点,[用法示例](https://youzan.github.io/vant/v2/#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | string、() => Element | body |
样式变量
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考
。
名称 | 默认值 | 描述 | |
---|---|---|---|
@toast-max-width | 70% | - | |
@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-color | fade(@black, 70%) | - | |
@toast-icon-size | 36px | - | |
@toast-text-min-width | 96px | - | |
@toast-text-padding | @padding-xs @padding-sm | - | |
@toast-default-padding | @padding-md | - | |
@toast-default-width | 88px | - | |
@toast-default-min-height | 88px | - | |
@toast-position-top-distance | 20% | - | |
@toast-position-bottom-distance | 20% | - |