Skip to content

Loading 加载遮罩

一般用于显示 正在加载中 的状态,例如复杂数据运算,网络请求等。

TIP

开始,加载遮罩全局只会同时渲染一个实例,调用 popup.loading() 方法时,如果当前已存在加载遮罩,将会将其关闭,然后渲染一个新的加载遮罩。

基础使用

调用 popup.loading() 方法可以显示一个加载遮罩,全屏显示。

关闭加载遮罩 1.5.0+

调用 popup.loading.close() 方法可以关闭加载遮罩。

ts
// 关闭加载遮罩
popup.loading.close()

以前,popup.dialog() 方法的返回值是一个函数,用于关闭弹出层。

ts
const closeLoading = popup.loading()

// 关闭加载遮罩
closeLoading()

等待关闭动画结束 1.5.0+

popup.loading.close() 方法的返回值是一个 Promise 对象,用于等待关闭动画结束后继续执行后续代码。

ts
// 关闭加载遮罩
await popup.loading.close()
// 只有加载遮罩关闭动画结束后,才会继续执行后续代码
console.log('加载遮罩关闭后,继续执行后续代码')

设置主题

可以通过 theme 选项来自定义主题,默认值为 primary,支持的主题有 primaryinfosuccesswarningdanger

自定义标题文本 1.3.3+

可以通过 title 选项来自定义标题文本。

自定义图标尺寸

可以通过 iconSize 选项来自定义图标尺寸,默认值为 60

禁用遮罩层 1.5.0+

可以通过 mask 选项来禁用遮罩层。

禁用遮罩层高斯模糊 1.3.3+

为了提升用户关注度,该弹出层使用了 高斯模糊 背景遮罩,可以通过 maskBlur 选项来禁用遮罩层的高斯模糊效果。

详细配置

具体可以参考 API 控制器实例 popup.loading()

Released under the MIT License.