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,支持的主题有 primary、info、success、warning、danger。
自定义标题文本 1.3.3+
可以通过 title 选项来自定义标题文本。
自定义图标尺寸
可以通过 iconSize 选项来自定义图标尺寸,默认值为 60。
禁用遮罩层 1.5.0+
可以通过 mask 选项来禁用遮罩层。
禁用遮罩层高斯模糊 1.3.3+
为了提升用户关注度,该弹出层使用了 高斯模糊 背景遮罩,可以通过 maskBlur 选项来禁用遮罩层的高斯模糊效果。
详细配置
具体可以参考 API 控制器实例 popup.loading()。