vant/packages/toast/zh-CN.md

Toast 轻提示

使用指南

import { Toast } from 'vant';

Vue.use(Toast);

代码演示

文字提示

Toast('我是提示文案，建议不超过十五字~');

加载提示

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

成功/失败提示

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

高级用法

const toast = Toast.loading({
  duration: 0,       // 持续展示 toast
  forbidClick: true, // 禁用背景点击
  loadingType: 'spinner',
  message: '倒计时 3 秒'
});

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

组件内调用

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

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

单例模式

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

Toast.allowMultiple();

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

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

方法

方法名	参数	返回值	介绍
Toast	`options	message`	toast 实例
Toast.loading	`options	message`	toast 实例
Toast.success	`options	message`	toast 实例
Toast.fail	`options	message`	toast 实例
Toast.clear	clearAll	void	关闭提示
Toast.allowMultiple	-	void	允许同时存在多个 Toast
Toast.setDefaultOptions	options	void	修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions	-	void	重置默认配置，对所有 Toast 生效

Options

参数	说明	类型	默认值
type	提示类型，可选值为 loading success fail html	String	text
position	位置，可选值为 top middle bottom	String	middle
message	内容	String	''
mask	是否显示背景蒙层	Boolean	false
forbidClick	是否禁止背景点击	Boolean	false
loadingType	加载图标类型, 可选值为 spinner	String	circular
duration	展示时长(ms)，值为 0 时，toast 不会消失	Number	3000

更新日志

版本	类型	内容
1.1.5	bugfix	修复使用 forbidClick 属性时导致其他弹层的蒙层失效的问题
1.1.3	feature	新增 loadingType 属性
1.0.3	bugfix	修复蒙层在某些情况下无法收起的问题
1.0.2	bugfix	修复蒙层被其他元素遮挡的问题
1.0.0	feature	支持通过 Vue.use 注册
0.12.7	feature	新增 allowMultiple 方法，支持同时弹出多个 Toast
0.12.6	bugfix	修复文案换行问题
0.12.4	feature	新增 setDefaultOptions 方法
0.11.4	feature	支持 this.$toast 方式调用
0.10.8	feature	新增 mask 属性
0.10.3	feature	新增 position 属性
0.9.2	feature	支持 loading 和 text 属性同时使用
0.9.2	improvement	布局方式改为 Flex 布局