Vant Toast tips

Introduced

import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);

Code demo

Text tips

Toast('提示内容');

Load prompt

Using the Toast.loading method to demonstrate loading tips, background clicks can be disabled with forbidClick properties, and load icon types can be customized with the loading Type property.

Toast.loading({
  message: '加载中...',
  forbidClick: true
});

// 自定义加载图标
Toast.loading({
  message: '加载中...',
  forbidClick: true,
  loadingType: 'spinner'
});

Success/failure prompt

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

Custom icons

Toast({
  message: '自定义图标',
  icon: 'like-o'
});

Toast({
  message: '展示图片',
  icon: 'https://img.yzcdn.cn/vant/logo.png'
});

Dynamic update tips

const toast = Toast.loading({
  duration: 0, // 持续展示 toast
  forbidClick: true,
  message: '倒计时 3 秒'
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = `倒计时 ${second} 秒`;
  } else {
    clearInterval(timer);
    // 手动清除 Toast
    Toast.clear();
  }
}, 1000);

In-component calls

When the toast component is introduced, the method is automatically mounted on Vue'$toast prototype for easy in-component calls.

export default {
  mounted() {
    this.$toast('提示文案');
  }
}

Singleton mode

Toast defaults to single-case mode, where only one toast exists at a time, and if you need to pop up multiple toasts at the same time, you can refer to the following example

Toast.allowMultiple();

const toast1 = Toast('第一个 Toast');
const toast2 = Toast.success('第二个 Toast');

toast1.clear();
toast2.clear();

Modify the default configuration

The Toast's default configuration can be modified globally through the Toast.setDefaultOptions function

// 将所有 Toast 的展示时长设置为 2000 毫秒
Toast.setDefaultOptions({ duration: 2000 });

// 将所有 loading Toast 设置为背景不可点击 (2.2.10 版本开始支持)
Toast.setDefaultOptions('loading', { forbidClick: true });

// 重置所有 Toast 的默认配置
Toast.resetDefaultOptions();

// 重置 loading Toast 的默认配置 (2.2.10 版本开始支持)
Toast.resetDefaultOptions('loading');

Api

Method

Options