Loading 加载
加载数据时显示动效。
ts
import { Loading } from '@szhn/dh-design-pc'区域加载
在需要的时候展示加载动画，防止页面失去响应提高用户体验。通过 v-loading 指令绑定一个 boolean 值即可为元素添加遮罩。
自定义加载中组件内容
可以通过 element-loading-text / element-loading-spinner / element-loading-svg / element-loading-background 自定义加载文字、图标以及背景色。
让加载组件铺满整个屏幕
当使用指令方式时，给 v-loading 添加 fullscreen 修饰符可以让遮罩插入至 body 上，可以搭配 lock 修饰符锁定滚动。
以服务的方式来调用
Loading 还可以通过 Loading.service(options) 以服务方式调用，返回一个 Loading 实例，调用 close() 关闭。全屏 Loading 默认是单例模式；如果完整引入 dh-design-pc，也可以通过全局方法 this.$loading(options) 调用。
应用上下文继承
Loading.service 支持接收当前应用的 appContext 作为第二个参数，从而继承全局配置、国际化与注入内容。
ts
import { getCurrentInstance } from 'vue'
import { Loading } from '@szhn/dh-design-pc'
const { appContext } = getCurrentInstance()!
Loading.service({}, appContext)API
配置项（部分）
| 名称 | 说明 | 类型 | 默认 |
|---|---|---|---|
| target | Loading 需要覆盖的 DOM 节点 | string / HTMLElement | document.body |
| body | 同指令中的 body 修饰符 | boolean | false |
| fullscreen | 同指令中的 fullscreen 修饰符 | boolean | true |
| lock | 同指令中的 lock 修饰符 | boolean | false |
| text | 加载文案 | string | — |
| spinner | 自定义加载图标类名 | string | — |
| background | 遮罩背景色 | string | — |
| customClass | 自定义类名 | string | — |
| svg | 自定义 svg 元素 | string | — |
| svgViewBox | 自定义 svg 的 viewBox | string | — |
| beforeClose | 关闭前回调，返回 false 可阻止关闭 | () => boolean | — |
| closed | 完全关闭后的回调 | () => void | — |
指令修饰符
| 指令 | 说明 |
|---|---|
| v-loading | 是否显示加载动画 |
| v-loading.fullscreen | 全屏加载 |
| v-loading.lock | 锁定滚动 |
| v-loading.body | 将遮罩插入到 body |
| element-loading-text | 加载文案 |
| element-loading-spinner | 自定义加载图标 |
| element-loading-svg | 自定义 SVG 加载图标 |
| element-loading-svg-view-box | 自定义 SVG viewBox |
| element-loading-background | 背景色 |
| element-loading-custom-class | 自定义类名 |
更多配置参见 Element Plus Loading。