spz-loading 加载中
用于页面和区块的加载中状态。
布局
跳转到“布局”何时使用
跳转到“何时使用”页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”最简单的加载用法，直接在页面中展示加载。
<div class="loading-wrapper">
<spz-loading layout="container"></spz-loading>
</div>作为蒙层
跳转到“作为蒙层”使用 has-mask 属性来指明加载仅作为蒙层显示，不显示加载指示符。
<div class="loading-wrapper">
<spz-loading layout="container" has-mask></spz-loading>
</div>默认隐藏
跳转到“默认隐藏”使用方法来显示或隐藏。
<div class="action-buttons">
<button @tap="loading.showLoading">Show loading</button>
<button @tap="loading.close">Close loading</button>
</div>
<div class="loading-wrapper">
<spz-loading layout="nodisplay" hidden id="loading"></spz-loading>
</div>属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| has-mask | 如果该属性存在，加载展示作为蒙层 | - | - | 否 |
| animate-in | 对话框出现的过渡动画效果 | AnimationPresets | fade-in |
否 |
AnimationPresets可选值
跳转到“AnimationPresets可选值”fade-in
渐显效果，默认过渡时间为0.1s。
fly-in-bottom
从下方向上移动出现，默认过渡时间为0.2s。
fly-in-top
从上方向下移动出现，默认过渡时间为0.2s。
方法
跳转到“方法”showLoading
跳转到“showLoading”显示加载，不需要参数。
close
跳转到“close”隐藏加载，不需要参数。