0.0.4

Loading 加载 ​

数据加载过程中展示动画。

区域加载 ​

在容器（如表格）内展示加载动画。

Uniboot UI 提供指令与服务两种方式。自定义指令 v-loading 绑定布尔值即可；默认遮罩追加在使用指令的元素上，添加 body 修饰符可将遮罩挂到 body。

自定义 ​

可自定义加载文案、图标与背景色。

在绑定 v-loading 的元素上使用 element-loading-text 设置文案；element-loading-spinner / element-loading-svg 与 element-loading-background 分别设置图标与背景。

WARNING

虽然 element-loading-spinner / element-loading-svg 支持传入 HTML 片段，但动态渲染不可信 HTML 易导致 XSS。请确保内容可信，切勿将用户输入直接赋给上述属性。

全屏加载 ​

全屏展示加载动画。

指令方式需加 fullscreen 修饰符，内容挂到 body；若需锁定页面滚动，再加 lock。服务方式默认全屏。

服务方式 ​

也可通过服务调用。引入：

ts
import { ULoading } from 'uniboot-ui'

调用：

ts
ULoading.service(options)

options 为加载配置，详见下表。LoadingService 返回实例，可调用 close 关闭：

ts
const loadingInstance = ULoading.service(options)
nextTick(() => {
  // 建议异步关闭加载
  loadingInstance.close()
})

全屏加载为单例：若未关闭就再次调用全屏加载，会返回同一实例而非新建：

ts
const loadingInstance1 = ULoading.service({ fullscreen: true })
const loadingInstance2 = ULoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true

对任一实例调用 close 即可关闭该全屏加载。

若完整引入 Uniboot UI，会在 app.config.globalProperties 注册全局方法 $loading，用法为 this.$loading(options)，同样返回实例。

应用上下文继承 ​

加载构造函数第二个参数可传入 context，以继承当前应用上下文。

TIP

若已全局注册 ULoading 组件，将自动继承应用上下文。

ts
import { getCurrentInstance } from 'vue'
import { ULoading } from 'uniboot-ui'

// 在 setup 中
const { appContext } = getCurrentInstance()!
ULoading.service({}, appContext)

加载 API ​

选项 ​

名称说明类型默认值
target需要覆盖的 DOM 节点；可为元素或选择器字符串（将传给 document.querySelector）string / HTMLElementdocument.body
body同 v-loading 的 body 修饰符booleanfalse
fullscreen同 v-loading 的 fullscreen 修饰符booleantrue
lock同 v-loading 的 lock 修饰符booleanfalse
text加载图标下方文案string / VNode / array—
spinner自定义旋转图标类名string—
background遮罩背景色string—
customClass加载容器的自定义类名string—
svg自定义 SVG 片段以替换默认加载图标string—
svgViewBox为加载 SVG 设置 viewBoxstring—
beforeClose关闭前回调；返回 false 将中止关闭Function—
closed完全关闭后触发Function—

指令 ​

名称说明类型
v-loading是否显示加载；也可传入配置对象boolean / LoadingOptions
element-loading-text加载文案string
element-loading-spinner自定义旋转图标（HTML/类名等）string
element-loading-svg自定义 SVG（与 element-loading-spinner 同类用途）string
element-loading-svg-view-box为加载 SVG 设置 viewBoxstring
element-loading-background遮罩背景色string
element-loading-custom-class加载容器自定义类名string