Vant Toast 轻提示
Vant Toast 轻
import Vue from 'vue'; import { Toast } from 'vant'; Vue.use(Toast);
Toast('');
使用Toast.loading展示加载,通过forbidClick可以禁用背景点击,通过loadingType可以加载图标类型。
Toast.loading({ message: '加载中...', forbidClick: true }); // 加载图标 Toast.loading({ message: '加载中...', forbidClick: true, loadingType: 'spinner' });
Toast.success('成功文案'); Toast.fail('失败文案');
Toast({ message: '图标', icon: 'like-o' }); Toast({ message: '展示', icon: 'https://img.yzcdn.cn/vant/.png' });
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);
引入 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.setDefaultOptions可以全局 Toast 的认配置
// 将所有 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');