Toast 轻提示

引入

  1. import{Toast}from'vant';
  2. Vue.use(Toast);

代码演示

文字提示

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

加载提示

  1. Toast.loading({
  2. mask:true,
  3. message:'加载中...'
  4. });

成功/失败提示

  1. Toast.success('成功文案');
  2. Toast.fail('失败文案');

自定义图标

  1. Toast({
  2. text:'自定义图标',
  3. icon:'like-o'
  4. });
  5. Toast({
  6. text:'展示图片',
  7. icon:'https://img.yzcdn.cn/vant/logo.png'
  8. });

高级用法

  1. const toast =Toast.loading({
  2. duration:0,// 持续展示 toast
  3. forbidClick:true,// 禁用背景点击
  4. loadingType:'spinner',
  5. message:'倒计时 3 秒'
  6. });
  7. let second =3;
  8. const timer = setInterval(()=>{
  9. second--;
  10. if(second){
  11. toast.message =`倒计时 ${second} 秒`;
  12. }else{
  13. clearInterval(timer);
  14. Toast.clear();
  15. }
  16. },1000);

组件内调用

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

  1. exportdefault{
  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();

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAll: booleanvoid关闭提示
Toast.allowMultiple-void允许同时存在多个 Toast
Toast.setDefaultOptionsoptionsvoid修改默认配置,对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置,对所有 Toast 生效

Options

参数说明类型默认值版本
type提示类型,可选值为 loadingsuccessfailhtmlStringtext-
position位置,可选值为 topbottomStringmiddle-
message文本内容,支持通过\n换行String''-
icon自定义图标,支持传入图标名称或图片链接,可选值见 Icon 组件String-2.0.1
mask是否显示背景遮罩层Booleanfalse-
forbidClick是否禁止背景点击Booleanfalse-
loadingType加载图标类型, 可选值为 spinnerStringcircular1.1.3
duration展示时长(ms),值为 0 时,toast 不会消失Number3000-
className自定义类名String | Array | Object-1.6.0
onOpened完全展示后的回调函数Function-2.0.0
onClose关闭时的回调函数Function-1.6.10
getContainer指定挂载的节点,可以传入选择器,或一个返回节点的函数String | () => HTMLElementbody1.6.3

Toast 轻提示 - 图1