在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。
<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函数');
},
})
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Toast | options | message |
toast 实例 | 展示提示 |
Toast.loading | options | message |
toast 实例 | 展示加载提示 |
Toast.success | options | message |
toast 实例 | 展示成功提示 |
Toast.fail | options | message |
toast 实例 | 展示失败提示 |
Toast.clear | clearAll |
void |
关闭提示 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
zIndex | z-index 层级 | number | 1000 |
duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 |
onClose | 关闭时的回调函数 | Function | - |