注册 X
提交 注:点击提交后系统会发送邮件到邮箱验证!(仅支持中国大陆邮箱)
我已阅读并同意 服务条款
首页 > IT技术笔记 > 查看笔记

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

方法

方法名说明参数返回值
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 successfail htmlstringtext
position位置,可选值为 top bottomstringmiddle
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)stringvan-icon
overlay是否显示背景遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
closeOnClick是否在点击后关闭booleanfalse
closeOnClickOverlay是否在点击遮罩层后关闭booleanfalse
loadingType[加载图标类型](https://youzan.github.io/vant/v2/#/zh-CN/loading), 可选值为 spinnerstringcircular
duration展示时长(ms),值为 0 时,toast 不会消失number2000
className自定义类名any-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
transition动画类名,等价于 [transition](https://cn.vuejs.org/v2/api/index.html#transition) 的name属性stringvan-fade
getContainer指定挂载的节点,[用法示例](https://youzan.github.io/vant/v2/#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi)string、() => Elementbody

样式变量

组件提供了下列 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%-

 打赏        分享



评论

邮箱: 昵称: