提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

基础用法

<z-toast ref="zToast" />

this.$toast("文字提示")

或

uni.$toast("文字提示")

加载提示

使用 this.$toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

this.$toast.loading({
	forbidClick: true,
	message: '加载中...',
	loadingType:'circular',
});

成功提示

this.$toast.success('成功文案');

失败提示

this.$toast.fail('失败文案');

自定义图标

this.$toast({
	message: "自定义图标",
	icon: 'mail_open',
});

自定义图片

this.$toast({
	message: '自定义图片',
	icon: 'https://cdn.zebraui.com/zebra-ui/images/assets/demo-noselect.png',
});

使用加载模板

通过指定loadingTemplate属性可选择加载模板。可选值a b c d e f。

this.$toast.loading({
	forbidClick: true,
	loadingTemplate: 'f',
});

自定义位置

通过position属性可指定显示位置，可选值top bottom。

this.$toast({
	message: "顶部展示",
	position: 'top',
});

动态更新提示

const text = (second) => `倒计时 ${second} 秒`;
const toast = this.$toast.loading({
	duration: 0,
	forbidClick: true,
	message: text(3),
	loadingTemplate: 'f'
});
let second = 3;
const timer = setInterval(() => {
	second--;
	if (second) {
		toast.options.message = text(second);
	} else {
		clearInterval(timer);
		this.$toast.clear();
	}
}, 1000);

关闭时的回调函数

使用

this.$toast({
	type: 'success',
	message: '提交成功',
	onClose: () => {
		this.$toast('执行OnClose函数');
	},
})

方法

Options