TIP

🚧 组件库更新通知 🚧：我们正在努力完善我们的组件库。

Loading 加载

加载数据时显示动效。

基础用法

自定义指令 v-loading，只需要绑定 boolean 值即可。

TIP

🔨 施工中：我们的团队正在全力以赴，以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

自定义加载中组件内容

在绑定了 v-loading 指令的元素上添加 element-loading-text 属性，其值会被渲染为加载文案，并显示在加载图标的下方。 类似地， element-loading-spinner、element-loading-background 属性分别用来设定 加载图标、背景色值。

TIP

🔨 施工中：我们的团队正在全力以赴，以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

全屏加载

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上） 此时若需要锁定屏幕的滚动，可以使用lock修饰符； 当使用服务方式时，遮罩默认即为全屏，无需额外设置。

TIP

🔨 施工中：我们的团队正在全力以赴，以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

服务方式调用

服务方式调用，可以自定义遮罩的文案，也可以通过 close 方法关闭。

import { kawaLoading } from "kawa-ui";

需要的时候通过以下方式调用

kawaLoading.service(options);

LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它

const loading = kawaLoading.service(options);
nextTick(() => {
  loading.close();
});

TIP

以服务的方式调用的全屏 Loading 是单例的。 若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例

Loading API

Options

Name	Description	Type	Default
target	遮罩绑定的目标元素	HTMLElement	document.body
fullscreen	是否为全屏遮罩	boolean	true
lock	是否锁定屏幕滚动	boolean	false
text	加载文案	string	--
spinner	加载图标	string	--
background	遮罩背景色	string	--

Directive

Name	Description	Type
v-loading	是否显示加载动画	boolean
kawa-loading-text	加载文案	string
kawa-loading-spinner	加载图标	string
kawa-loading-background	遮罩背景色	string